CODEWITHSUNDEEP
jquery
Mr AH
Mr AH

Reputation: 1120

Jquery load callback doesn't fire when something is actually loaded

I just moved to jquery 1.11.1 (i was on 1.2.x before on this project). The $.load function used to pull response text/html into an element doesn't appear to be firing the callback all of sudden!

$("#thing").load("page", null, callback);

So i debugged the jquery code.. as expected it uses $.ajax, grabs a page, puls it in the self using $.html and then the callback is actually fired on the "complete" function of $.ajax. This function is meant to always fire at all times, whether the ajax was successful or not. After driving myself INSANE for a while, i tried to just invoke the calls myself to test i wasn't really going mad.. this is what i found

$.ajax({url:"page"})
            .done(function(r){
                $("#thing").html(r);
            })
            .complete(function(){alert("complete");});

This populates the element but does doesn't give me the alernt.. but the below does give me an alert!.. why?

$.ajax({url:"page"})
            .done(function(r){
                //$("#thing").html(r);
                alert("done...?");
            })
            .complete(function(){alert("complete");});

I get BOTH done and complete alerts..

UPDATE 1

For the comment about using "always" instead of "complete". i want to use "load" not "ajax" and, this is the code in jq 1.11.1

// Keep a copy of the old load method
var _load = jQuery.fn.load;

/**
 * Load a url into a page
 */
jQuery.fn.load = function( url, params, callback ) {
    if ( typeof url !== "string" && _load ) {
        return _load.apply( this, arguments );
    }

    var selector, response, type,
        self = this,
        off = url.indexOf(" ");

    if ( off >= 0 ) {
        selector = jQuery.trim( url.slice( off, url.length ) );
        url = url.slice( 0, off );
    }

    // If it's a function
    if ( jQuery.isFunction( params ) ) {

        // We assume that it's the callback
        callback = params;
        params = undefined;

    // Otherwise, build a param string
    } else if ( params && typeof params === "object" ) {
        type = "POST";
    }

    // If we have elements to modify, make the request
    if ( self.length > 0 ) {
        jQuery.ajax({
            url: url,

            // if "type" variable is undefined, then "GET" method will be used
            type: type,
            dataType: "html",
            data: params
        }).done(function( responseText ) {

            // Save response for use in complete callback
            response = arguments;

            self.html( selector ?

                // If a selector was specified, locate the right elements in a dummy div
                // Exclude scripts to avoid IE 'Permission Denied' errors
                jQuery("<div>").append( jQuery.parseHTML( responseText ) ).find( selector ) :

                // Otherwise use the full result
                responseText );

        }).complete( callback && function( jqXHR, status ) {
            self.each( callback, response || [ jqXHR.responseText, status, jqXHR ] );
        });
    }
    return this;
};

notice how it uses "complete"..

Upvotes: 1

Views: 1367

Answers (1)

Mr AH
Mr AH

Reputation: 1120

The issue here is an odd one. The HTML coming back from my page is not valid! though it is valid enough to be displayed. Inside the "load" method the $.parseHTML method is called on append of the responseText/html. This throws and also returns the html and you will see the html populated in the target element.

What it should probably do is catch this exception and ignore it so that the "complete" method is called every time (so i see this as a bug in jquery).

Upvotes: 1

Related Questions