CODEWITHSUNDEEP
javascriptjqueryajaxjquery-events
diank
diank

Reputation: 638

jQuery abort all AJAX requests(query) on click of a button

How can I cancel/abort/stop all AJAX requests/query that I have not yet received the response with button or some click event? Because I make multiple AJAX calls. Here is my code:

function makeCalls() {
    var urls = ["url1.php", "url2.php", "url3.php", "url4.php"];
    $.each(urls, function(index, value) {
        $.ajax({
            global: false,
            type: 'POST',
            url: value,
            dataType: 'html',
            data: returnData(),
            cache: false,
            timeout: 60000,
            success: function(result) {         
                switch(value) {
                    case "url1.php":
                        // my code for url1 
                    case "url2.php":
                        // my code for url2 
                    case "url3.php":
                        // my code for url3 
                    case "url4.php":
                        // my code for url4 
                }
            },
            error: function (request, status, error) {
                console.log('ERROR: ' + request.responseText);
            }
        });
    });
}

Upvotes: 0

Views: 2864

Answers (1)

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

var ajaxRequestsArray = [];

function makeCalls() {
    var urls = ["url1.php", "url2.php", "url3.php", "url4.php"];
    $.each(urls, function(index, value) {
     var ajaxRequest = $.ajax({
            global: false,
            type: 'POST',
            url: value,
            dataType: 'html',
            data: returnData(),
            cache: false,
            timeout: 60000,
            success: function(result) {         
                switch(value) {
                    case "url1.php":
                        // my code for url1 
                    case "url2.php":
                        // my code for url2 
                    case "url3.php":
                        // my code for url3 
                    case "url4.php":
                        // my code for url4 
                }
            },
            error: function (request, status, error) {
                console.log('ERROR: ' + request.responseText);
            }
        });
       ajaxRequestsArray.push( ajaxRequest );
    });
}//makeCalls()

Now suppose this is your button:

<a href="#" id="abort-all-ajax" title="Abort all requests">Abort all requests</a>

$("#abort-all-ajax").on("click", function(e){
    e.preventDefault();
    for(var i = 0; i < ajaxRequestsArray.length; i++ )
    {
      var curRequest = ajaxRequestsArray[i];
      curRequest.abort();
    }//for()

});//click handler

Upvotes: 3

Related Questions