jquery .load( ) and trigger function AFTER new content loads? just like JavaScript onload event

Question

Using jquery, I am swapping some content in a web page by use of jquery\'s .load() function. I want to trigger an event immediately once the content ha

Answer 1

Upon reading the jQuery docs pages for jQuery.get() and jQuery.load(), the callback argument is quoted as the following:

"A callback function that is executed if the request succeeds."

Let me stress the terms "request" and "succeeds". The request may succeed, but that does not mean that the content is loaded. Same problem as .load() — the functions aren't built the way I was thinking.

If I want to trigger an event once the new content finally loads, I'll need to take a different approach.

• I could use the JS onload event, and trigger it by completely replacing an HTML element (having the replaced code contain an onload property). EDIT: Note that using HTML iframe elements is pretty awful, primitive, and "clunky". I just need to find a better way to trigger a function as soon as loading the new content finishes.
• Also, I could use jQuery to check the .ready() state of new content, but ("AFAIK" / as far as I know) that will only work if the checked content is a new HTML element, not a preexisting HTML element whose interior content is changed. The jQuery .ready() status of any preexisting element will (AFAIK) already be shown as "ready" despite if new content is loading. Perhaps I am wrong about this, and I would like to be corrected if so.

Unless otherwise notified, this answer will be marked as the correct one. The original question was mistaken that .load() was all I needed. Cheers!

Answer 2

Try using a different method rather than load(), I would suggesting using get(). Something like this may be more useful to you...

var jqxhr = jQuery.get(url,vars);

jqxhr.success(function(data){
    # This will only be called once the remote content has been loaded in
    # The data will then be stored in the data param and can be used within your site
});

jqxhr.error(function(data){
    # Something went wrong, never mind lets just handle it gracefully below...
});

I hope this is a solution to your problem!

For more information see http://api.jquery.com/jQuery.get/

I have quickly created this function below that may be of help to you... its not refined!

jQuery.fn.loadNewData = function() {

    var object = jQuery(this);
    var jqxhr = jQuery.get(arguments[0]);

    // check for success
    jqxhr.success(function(data) {
        // load the data in
        object.html(data);
    });

    jqxhr.error(function(){
        alert('Failed to load data');
    });
}

Using this you can call how similarly to how you would call the load() function.

jQuery('#object').loadNewData(url);

Answer 3

I think you might be misinterpreting what you are seeing. Depending on the browser you are using you won't see the new elements in the browser if you pop up an alert in the callback because it won't rerender the DOM until you cede control back to the browser. That doesn't mean you can't grab the new elements from the DOM and start fading them in. Take the following jsfiddle: http://jsfiddle.net/ttb55/8/ in Chrome it will show the first div when the second alert is up, then fade in the second div. In IE it won't show the first div when the second alert is up, this is the state I think you are in after load during the callback, but it still works once you hit ok because everything was in the DOM as promised.