Ra3IDeN Ra3IDeN - 2 months ago 8
Ajax Question

How to keep track of ongoing ajax requests?

I am executing simultaneous ajax request on a button click.

I have a table with a list of alarms and each row has it's own button that once clicked tries to clear the alarm in the db and then I remove it from the table.

I can click on these buttons one after another and trigger an ajax request.

Problem:

lets say I click on a button and for some reason this is taking time and the user manages to click on yet another button to start a new ajax.

I want to execute a script block in my ajax succes method ONLY if all the ajax requests in the current scope are finished.

code:

$(".signAlarm")
.on("click",
function () {
var _this = $(this).parents(".alarmRow");
var alarm = {
Id: $(_this).data("id")
}
$.automation.worker.postJson("/Alarm/SigAlarm",
JSON.stringify({ alarm }),
function (data) {
if (!$.automation.worker.ajaxActive()) {
// execute this if all the sign alarm attempts are finished
}
$(_this).remove();
});
});


ajaxActive function:

ajaxActive: function() {
if ($.active) return true;

return false;
}


when searching for an answer I found jquery.active which I use in the attempt above but when I check the jquery.active in my success method it is "1" and not 0 even though only one button click has been made.

I also checked this post which got me thinking of jquery.active above but alos $.ajaxStart and $.ajaxStopp.

The problem with $.ajaxStart and $.ajaxStopp and far as I understand is that they are global and I want specific code to execute when these alarms are signed and don't wish for this to happen on every page when an ajax is made.

How do I manage this?

Answer

After a great deal of pondering and searching for some kind of build in function in jquery i decided to make an own attempt.

What I wanted:

  1. Make several ajax requests
  2. Keep track of the amount of request that I had in a particular scope(NOT GLOBAL)
  3. execute script when no ajax are being made.

code:

global array:

 ajaxRequests: { value: [] }

before each ajax request:

$.automation.globals.ajaxRequests.value.push(1);

after each ajax request:

    clearAjax: function() {
        $.automation.globals.ajaxRequests.value.splice(-1, 1);
    }

summing it up:

       $(".signAlarm")
            .on("click",
                function () {
                    var _this = $(this).parents(".alarmRow");
                    var alarm = {
                        Id: $(_this).data("id")
                    }

                    $.automation.globals.ajaxRequests.value.push(1);

                    $.automation.worker.postJson("/Alarm/SigAlarm",
                    JSON.stringify({ alarm }),
                    function (data) {
                        $.automation.worker.clearAjax();
                        if ($.automation.globals.ajaxRequests.value.length === 0) {
                           // all ajax finished, execute code
                        }
                        $(_this).remove();
                    });
                });
Comments