I am using the jQuery $(document).ready() event on page. All is fine, except that
if I am loading data using Ajax calls, the $(document).ready() event does not fire. I guess that it behave in such way because the page was already loaded and I am just adding more data from the Ajax response to the DOM.
How can I refire the ready event?
If you need to execute some additionnal Javascript, you might use a function that you call upon Ajax callback onComplete event :
function initJS(){
//your code here
}
$.ajax({
url: 'ajax/test.html',
success: function(data){
},
complete: function(){
initJS();
}
});
.load(), .bind(), or .live() will be your friends here....
just break the logic that is in the "$(document).ready( function() {});" block out into a separate function. Then the page will call it once when it is "ready", and you can directly call that function when you want to do a refresh.
I think the person asking is because most developer doing jQuery plugins i.e wordpress plugins use the "ready" function.
Everyone here is saying go modify the plugins !
I'm facing the same problem as I'm developing AJAX template for wp and most plugins don't work !
Related
I have a rather easy question:
Is it possible to “send” in the code (invisible to the user) a false $(document).ready() in Jquery?
What I want to do is to force all of my Jquery – Code to be ready for action after my Ajax call…
I know of the .on() function but it can’t trigger all of my code on the same time other that while loading the main content……
Thank you for your help
ps. I know I didn't post a lot for this question but it still bugs me...
pps. Sorry for my english
A pattern like this could work:
function init() {
//do whatever
}
$(document).ready(init);
$.ajax({...}).done(init);
You can do your event handling after ajax complete using .ajaxComplete()
"Whenever an Ajax request completes, jQuery triggers the ajaxComplete event. Any and all handlers that have been registered with the .ajaxComplete() method are executed at this time."
$(document).ajaxComplete(function (event, request, settings) {
//event handling
});
I have an html form that loads its contents through ajax and includes buttons that, when clicked, should execute a JavaScript function that is defined in the html page's script tag. SO: Button is loaded through ajax (works), but when button is clicked, it doesn't trigger the desired action and doesn't trigger a JavaScript error in Firebug. How does one get the onclick signal of a bunch of buttons loaded through ajax to bind to an already existing JavaScript function?
EDIT: I should have noted also that I am not using JQuery. I am willing to do so if it is the only way, but otherwise, I would prefer to use only native JavaScript.
EDIT2: My problem was a bit more involved, but as was stated in the chosen answer, you should be able to set the onclick event handler in the php script before sending the data through ajax. If you have a data-heavy response and want to reduce bandwidth, you might consider doing everything client-side, but I find it easier in most situations just to set the onclick attribute in the php script.
Your dynamically generated button could have an inline event bound to it. When generating the button, simply make sure it has an onclick="alreadyExistingFunc();" and the page will happily execute it.
Alternatively, when your AJAX data is finished writing itself into the document, find the new button(s) and bind the event to them:
function ajaxSuccess()
{
document.getElementById('newButtonIdHere').onClick = function() {
alreadyExistingFunc();
}
}
That should do the trick. Also note that if you ever "need" a small part of jQuery to do something (like selectors or event handling), you can almost always do it without loading the whole library.
Append/insert the HTML (retrieved AJAX response) to DOM and bind click event to it:
function alreadyExistingFunc() {
alert('button is clicked!');
}
var ajax_data ="<button id='my-button'>My Button</button>";
$('body').append(ajax_data).find('#my-button').on('click', function(e){
alreadyExistingFunc();
// some more code...
});
OR:
$('body').append(ajax_data).find('#my-button').on('click', alreadyExistingFunc);
You could also use a callback:
function getAjaxContent(callback) {
$.ajax({url: "url"}).done(function() {
callback(data);
});
}
getAjaxContent(function (data) {
//ajax content has been loaded, add the click event here
}
I have lots of HTML generated on $(document).ready(). I have a simple window system. But not only it is generated on $(document).ready() - also some HTML elements (different JS files put stuff into $(document).ready() ). I want my window system to be generated after $(document).ready() is called. So how do I handle a function to be called after all the code registered in $(document).ready() is completed?
$(window).load(function(){
//some code after ready
});
There is another event which is fired later. it's $(window).load(); This is fired after all resources are loaded.
But perhaps you want this:
function loadWindowSystem(){
// load window system here
}
$(document).ready(function(){
// do some html stuff here
loadWindowSystem();
})
This way you can separate your code in functions.
I usually don't advocate using setTimeout, but you can build on top of #jfriend00's answer to create a more abstract approach:
$(document).ready(function() {
setTimeout(function() {
$(document).trigger('afterready');
}, 1);
});
$(document).bind('afterready', function() {
// call your code here that you want to run after all $(document).ready() calls have run
});
If you want something to fire right after all $(document).ready() calls, you can put this once anywhere in your page:
$(document).ready(function() {
setTimeout(function() {
// call your code here that you want to run after all $(document).ready() calls have run
}, 1);
});
This will get called along with all the other document.ready calls, but it sets a short timeout that will execute after all the other document.ready calls have finished.
By adding another handler function ones the document is ready, the
handler will almost certainly be last one in the ready event queue. Effectively giving you an instant "post" ready handler function.
$(document).ready(function() {
$(document).ready(function() {
// code to run "after" ready
});
});
$(document).ready
When multiple functions are added via successive calls to this method, they run when the DOM is ready in the order in which they are added.
Note that this will only work as long as no ones else uses this "trick".
there is nothing after this function , so if you have some ajax loaders, only think you can do is to wait for all of them and then start rendering
EDIT But i wonder why you dont just structuralize your code to eliminate this.
$(document).ready() is called just after the DOM has finished loading.
pageLoad() is called next on a 0 timer, but beware it is run after every partial postback.
Edit: Added side note - this will only count if using ASP.NET, the pageLoad functionality mentioned is separate from jQuery. See more info Here
You can use
$(window).on('load', function () {
alert("Window Loaded");
});
$(window).load(function(){
alert("Window Loaded");
}
has been removed from jQuery.
The problem is the following.
We have lots of ajax call via $.ajax function. Now I would like to add some loader indicator that will show up when ajax call started and disappear when ajax call finishes.
Is there a way to extend jquery's $.ajax function with this kind of behavior.
Of course it is always possible to search for all $.ajax in code and add necessary behavior but I feel somehow lazy to do this.
You have jQuery functions for that. Take this example:
<div id="loading">Loading...</div>
Now the jQuery code:
$(document).ready(function() {
$().ajaxStart(function() { $('#loading').show(); });
$().ajaxStop(function() { $('#loading').hide(); });
});
ajaxStart detects that an ajax call is being made and executes a function. ajaxStop will detect that the ajax call has ended and will execute a function. This works with any ajax call in your code.
You use ajaxStart/ajaxStop. may find this article to be of help.
I'm using some external jQuery with $(document).ready() to insert adverts after the document ready event has fired, something like:
$(document).ready( function() {
$('#leaderboard').html("<strong>ad code</strong>");
});
This is to prevent the UI being blocked by the slow loading of the adverts. So far it's been working well.
Now I need to insert some more ads though our CMS system, this can't be part of the external JS file, so I'm wondering can I use a second document ready event and insert it using an inline script tag? If so, what will be the order of execution the external JS document ready event first or the inline script?
You can use as many event methods as you want, jquery joins them in a queue. Order of method call is same as definition order - last added is last called.
A useful thing may be also that, you can load html code with script using ajax and when code is loaded into DOM $().ready() also will be called, so you can load ads dynamically.
Yes, adding multiple $(documents).ready()s is not a problem. All will be executed on the ready event.
Note however that your code sample is wrong. $(document).ready() takes a function, not an expression. So you should feed it a function like this:
$(document).ready( function() {
$('#leaderboard').html("<strong>ad code</strong>");
});
That function will be executed when the document is ready.
Here's a little tutorial on Multiple Document Ready
An added bonus of the jQuery way is
that you can have multiple ready()
definitions. This is the case with all
jQuery events.
$(document).ready(function () {
alert("Number One"); });
$(document).ready(function () {
alert("Number Two");
JQuery calls the ready functions in the order they are defined.
If you want to load some data first and deleay execution use holdReady().