how to cancel an ajax request and clear info while it is running?

Question

this is the piece of the code I have. By default, "ajax_info_box" is hidden, by clicking "button", "ajax_info_box" shows and sends request, it probably takes about 5 seconds to result. How do I cancel and clear the request by click “cancel"? Any help would be appreciated.

   $('.ajax_info_box').hide()
   $('.button').click(function() {
   $('.ajax_info_box').show()
    var xhr =  $.ajax({
        type: "POST",
        url: 
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
          do something here

    });
    $('.cancel').click(function () {
       suppose to kill the request here
       $('.ajax_info_box').hide()
    }); 
});

even if you abort the request... the server side processing will continue to execute — Arun P Johny, Oct 16 '14 at 04:38

score 2 · Answer 1 · edited May 23 '17 at 10:25

2

xhr has an abort method on it

xhr.abort()

More here Abort Ajax requests using jQuery

edited May 23 '17 at 10:25

Community

1
1

answered Oct 16 '14 at 04:36

TGH

38,769
12
102
135

This method doesn't seem to work for me since I am using jquery 1.4.4. – 7537247 Oct 16 '14 at 06:27

score 1 · Answer 2 · answered Oct 16 '14 at 05:26

   $('.ajax_info_box').hide()
   $('.button').click(function() {
   $('.ajax_info_box').show()
    var xhr =  $.ajax({
        type: "POST",
        url: 
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
          do something here

    });
    $('.cancel').click(function () {
       xhr.abort();
       $('.ajax_info_box').hide()
    }); 
});

how to cancel an ajax request and clear info while it is running?

2 Answers2