How to call jquery ajaxStart + ajaxComplete

Question

Hey guys,

I have a load function and would like for the code to write some html into a div while it loads, and when it completes, to display the page. I saw some little writeups on the ajaxStart and ajaxComplete events, however I am not sure how to implement them.

Here is the jquery I am thinking of using, however not sure how to implement within the code I have currently…

$(document).ajaxStart(function(){ 
    $('#content').html("Loading Content...");
    });

Here is the current jquery I am using:

//Load content
$(".load").click(function(){
    $("#content").empty();     
    loadName = $(this).attr("id");
    $("#content").load("/content/" + loadName + ".php");
    });

Answer 1

If it's a single div and you would like to update its contents with a loading message/indicator, you can do so like this:

$("#content").html('<strong>Loading...</strong>')
             .load("/content/" + loadName + ".php");

I wouldn't use the ajaxStart and ajaxStop/ajaxComplete global events unless you have a common loading indicator for all ajax calls. That said, it can be done as follows:

$("#loading").bind("ajaxStart", function(){
    $(this).show();
}).bind("ajaxStop", function(){
    $(this).hide();
});

where the loading element is whatever you want to reveal during an ajax call.