take a look to the example:
example.jsp:
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').button().click(function() {
$("#mainContent").load("example_1.jsp");
});
});
</script>
<input id="Button1" type="button" value="RELOAD" />
<div id="mainContent"></div>
example_1.jsp:
<script type="text/javascript">
$(document).ready(function() {
$("#a").button().click(function() {
$("#a_form").dialog("open");
});
$("#a_form").dialog({
autoOpen: false,
height: 480,
width: 625,
modal: true
});
});
</script>
<input id="a" type="button" value="MODAL" />
<div id="a_form" title="Modal Dialog" class="ui-widget">
Hello!
</div>
I load example.jsp and I press the button "RELOAD".
Then, in "mainContent", appears the button "MODAL", that open a modal dialog.
But if I press again "RELOAD" button and then "MODAL" the MODAL DIALOG doesn't appear anymore!
why?
where am i doing wrong?
That is because :
<input id="a" type="button" value="MODAL" />
Is using an ID.
When you run load again you are creating another input with the id=a which is not allowed.
Try using a class identifier instead of an id
The problem might be because the script block of example_1 is ignored because it is loaded dynamically into the page.
So what you need to do is to move that script block to example.jsp and use .live() for '#a' instead of .click()
$("#a").button().live("click", function() {
$("#a_form").dialog("open");
});
Before you load/reload the main content try to empty it and then load.
<script type="text/javascript">
$(document).ready(function() {
$('#Button1').button().click(function() {
$("#mainContent").html('').load("example_1.jsp");
});
});
</script>
Related
hello i'm using javascript to show and hide element. its working but when loading the page the element still visible until i click on the button then it will be hiding. in my case i need the opposite ( the element should not be visible on loading page until i click on the button)
this is my code :
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>
(function($){
$(document).ready(function(){
$('#hideshow').click(function(){
$('.price-rules-table-wrapper').toggle('show');
});
});
})(jQuery);
did i miss something ?
Apply display:none:
(function($) {
$(document).ready(function() {
$('#hideshow').click(function() {
$('.price-rules-table-wrapper').toggle('show');
});
});
})(jQuery);
div {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>
Alternatively you can hide it programmatically on page load:
$('.price-rules-table-wrapper').hide();
(function($) {
$(document).ready(function() {
$('#hideshow').click(function() {
$('.price-rules-table-wrapper').toggle('show');
});
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>
There is a scenario where I need a function like xyz() to be called once a button on page is clicked and page is loaded using javascript/jquery.
I can't call xyz() directly on <Body onload="xyz()"> or inside document.ready() or $(window).on('load', function ()).
I need the function to be called once a button is clicked and page has loaded completely.
Below is working code on page load but not my requirement
<body onload="xyz();">
<form id="form1" runat="server">
<div id="vizContainer" style="width: 800px; height: 700px;">
</div>
</form>
</body>
Now below is my required code on button click and it is not working
<body>
<form id="form1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="functiongetdata()" />
<div id="vizContainer" style="width: 800px; height: 700px;">
</div>
</form>
</body>
<script type="text/javascript">
function functiongetdata() {
xyz();
}
</script>
you can use something like this
$(function() {
$('button.start').click(function() {
$('img.lazy').lazy({
bind: "event"
});
});
$('button.loadAll').click(function() {
$('.lazy').lazy({
bind: "event",
delay: 0
});
});
});
Refer this link for clear example
http://jquery.eisbehr.de/lazy/example_load-elements-by-events
Approach 1:
On window load function, update a hidden field or add a flag variable and set true
var myWindowIsLoaded = false
$(window).on('load', function (){
myWindowIsLoaded = true;
});
And then on the button click check the value
function xyz(){
if(myWindowIsLoaded){
// Do your stuff
}
}
Approach 2:
Add the function in the button click event on window load
$(window).on('load', function (){
$("#myButton").click(xyz);
});
I just want to understand more of the previous post from this site and w3school, where the loading image/icon is displayed while loading the page content.
Here's the script I've re-used -
<script type="text/javascript">
$(document).ready(function(){
$('#Btn_5').click(function() {
$('#spinner').show();
});
});
</script>
Here's the form section and script -
<form id="iform" method="get" action="">
Search: <input type="text" id="search_box"><br>
<div id="Btn_5" class="btn">Search</div>
</form>
<br>
<div id="spinner" class="spinner" style="display:none;">
<img id="img-spinner" src="http://www.w3schools.com/jquery/demo_wait.gif" alt="Loading"/>
</div>
<br>
<body>
<script type="text/javascript">
...
$( "div.content:contains('"+ filterarray[i] +"')").css( "display", "block" );
$("#results").append(results);
...
</script>
<div id="results"></div>
</body>
I have this loading icon spinner, but it doesn't work after the results are displayed. It only spins when button (Btn_5) is clicked and loading icon disappears when the page reloads.
QUESTION: I want to run the loading/spinning icon from the start of the button click until all content under the are displayed. Is there a way to do this?
I hope I am understanding correctly.
But, you want to show the spinner before:
$("#results").append(results);
and hide it after the results are appended?
If that is the case, then you should just be able to do;
$('#spinner').show(); //show spinner
$( "div.content:contains('"+ filterarray[i] +"')")
.css( "display", "block" ); //not sure what you are doing here
$('#results').append(results); //append results, which you have not defined in example
$('#spinner').hide(); //hide spinner
Use that as
//before load
window.onbeforeunload = function () { $('#spinner').show(); }
//after loaded
$(window).load(function() {
$('#spinner').hide();
});
I asked this question before, but I don't think I explained properly for what I am trying to accomplish.
There are multiple links on my website and I want to open the content from the link in a jquery ui modal dialog widget.
I'm trying to use 'this' to reference the link that the user selects dynamically.
What am I doing wrong here?
The code I'm using is below:
comment #1
comment #2
comment #3
<div id="somediv"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#somediv").load(this.getTrigger().attr("href")).dialog({
autoOpen: false,
width: 400,
modal: true
});
$("#test").click(function(){$( "#somediv" ).dialog( "open" );});
});
</script>
http://jsfiddle.net/qp7NP/
A couple changes: changed ID to Class and used IFrame.
comment #1<br>
comment #2<br>
<a href="http://ask.com/" class="test" >comment #3</a><br>
<div id="somediv" title="this is a dialog" style="display:none;">
<iframe id="thedialog" width="350" height="350"></iframe>
</div>
<script>
$(document).ready(function () {
$(".test").click(function () {
$("#thedialog").attr('src', $(this).attr("href"));
$("#somediv").dialog({
width: 400,
height: 450,
modal: true,
close: function () {
$("#thedialog").attr('src', "about:blank");
}
});
return false;
});
});
</script>
In case you want to pull in the HTML instead of IFrame, you will have to use Ajax (XMLHttpRequest), something like this: http://jsfiddle.net/qp7NP/1/
You can't have multiple elements with the same Id.
Change your links to to class="test" instead and therefore your click event to $('.test').click().
Also if you still have problems, and I remember I had some similar issues because how JQUery Dialog behaves itself with the DOM. It will literally rip your #somediv out of content and append it to the bottom of a page to display that dialog. I solved my dynamic dialog loading issues with wrapping it in another div.
<div id="somediv-wrap">
<div id="somediv">
</div>
</div>
<script>
$(document).ready(function() {
$("#somediv-wrap").dialog({
autoOpen: false,
width: 400,
height:200,
modal: true
});
$(".test").click(function(event)
{
event.preventDefault();
var link = $(this).attr('href');
$("#somediv").load(link,function(){
$( "#somediv-wrap" ).dialog( "open" );
});
});
});
</script>
Hey so I'm trying to use jTicker to say messages that can react to user input.
The way jTicker works, it affects text between html element tags.
In this example, I'm trying to use jQuery to modify the text between a certain set of tags that is being tickered? by jTicker. The problem is that whenever I try to change the text, jTicker only uses the text that was between the tags when the page first loaded and not the new text.
How can I fix this code so that the text that jTicker is affecting can be changed on the fly?
Javascript:
<script src="jquery.jticker.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#messageId").ticker({
rate: 40,
delay: 900,
transition: "fade",
});
$(".stop").click(function(){
$("#messageId").trigger("stop");
return false;
});
$(".play").click(function(){
$("#messageId").trigger("play");
return false;
});
});
function test() {
$('#theMessage').text('New text!');
}
</script>
Html:
<body>
<div id="messageId">
<p id="theMessage">Old text</p>
</div>
<div>
<input type="button" value="Test"
class="play" onClick="test();" />
</div>
</body>
function test() {
$('#theMessage').text($("#messageId").text());
}