Question

I have several ajax requests in a script, some sync some async I use a pload.gif to display when an ajax request is active for more than 1 second. I found that in one circumstance the pload.gif continued to display even though the request was successful and the expected actions completed. N:B: no other request has been fired i.e. $.active = 1. But ajaxStop does not fire furthermore I have tested ajaxComplete and ajaxSuccess (not that I want these as I want to capture any async request) and these also do not fire either.

Here is the offending request:

$.ajax({
    beforeSend: function(){
        $("#loading p").append("validate class schedules");
        console.log("validate class schedules");
    },
    type: "POST",
    url: "../_admin/admin_Validate_Class_Schedule.php",
    data: {class_Key: current_Class_Key, schedule_Key : current_Schedule_Key},
    dataType: "text",
    async: false,
    success: function(return_Data){
        console.log("success");
        var result = $.trim(return_Data);
        console.log("result: " + result + " " + "call count: " + call_Count + " : " + $("#schedule_Description").val() + " " + $("#schedule_Description").val().length + " " +  current_Class_Key);

        if (result == "exists"){
            $("#create_Schedule .form_Submit").attr("value", "Update Schedule");
            $("#create_Schedule").attr("action", "process_Schedule_Update.php");
            $(".form_Footer .form_Submit").css("color", "#fff");
            $(".form_Footer .form_Submit").removeAttr("disabled");                  
        } else {
            $("#create_Schedule .form_Submit").attr("value", "Create Schedule");
            $("#create_Schedule").attr("action", "process_Schedule_Create.php");
            $(".form_Footer .form_Submit").css("color", "red");
            $(".form_Footer .form_Submit").attr("disabled","disabled");             
            if ((current_Class_Key.length != 0) && ($("#schedule_Description").val().length != 0)){
                $(".form_Footer .form_Submit").css("color", "#fff");
                $(".form_Footer .form_Submit").removeAttr("disabled");
            }
        }   
    },
    error: function(){
        console.log("Validate Could not retrieve XML file.");
    }
});  // end ajax call

My temptation is to use the following at the end of the success branch

if ($.active == 1){                // nothing else requested which should be the case
   $.event.trigger( "ajaxStop" );  // force a stop
   $.active = 0;                   // force active to zero as belt and braces as not
}                                  // sure if triggering stop will set active to zero

However I am unsure – is this storing up a problem for later on and why should this be necessary anyway. I don’t want to have to start coding this in all my requests. I want all my requests to decrement $.active when finished. So I suppose the real question is why is this not so?

Any thoughts welcomed.

Answer 1

Maybe not a direct answer to you question of why it doesn’t seem to fire, but too lengthy for a comment and possibly a way around your problem:

You can use jQuery’s new Deferred system to attach ajax callbacks. The ajax call on the jQuery object returns a deferred object:

var dfd = $.ajax({
              beforeSend: function(){
                  $("#loading p")
                      .append("validate class schedules");
                  console.log("validate class schedules");
              },
              type: "POST",
              url: "../_admin/admin_Validate_Class_Schedule.php",
              data: {class_Key: current_Class_Key, schedule_Key : current_Schedule_Key},
              dataType: "text",
              async: false
          });

You can attach your callbacks on this object using deferred.then, deferred.done, deferred.fail:

dfd.done(function(){
    // ajax succes, handle
});
dfd.fail(function(){
    // ajax failure, handle
});

// OR

dfd.then(function(){
    // ajax succes, handle
}, function(){
    // ajax failure, handle
});

Once the deferred object gets ‘resolved’ (this happens when the ajax call is completed, or fails), the appropriate callbacks are called. Even if you attach a callback when it is already resolved, your callback will fire immediately (if appropriate of course)

This is the new way of doing things in jQuery and it can save you a lot of headaches! It’s clean and makes dealing with asynchronicity a lot easier.

More info in the docs here