Jquery Multiple Ajax Request on Button Click

Question

i have a button on my page

<input type="button" onclick="someFunction()" value="submit"/>

now when user click the button the js function someFunction() execute's. In this function there is request send to the server via jquery $.ajax method...

i need to know what happend if user repeatedly click the button.

does jquery maintain the que for request's or abort the previous request and start the new one..

if jquery maintain que then how can stop/abort them all.

any help would be very much appriciated.

1'st answer : each click will run new ajax request. And - for the second question possible duplicate of [Stop all active ajax requests in jQuery](http://stackoverflow.com/questions/1802936/stop-all-active-ajax-requests-in-jquery) — Royi Namir, Sep 12 '13 at 11:49
After clicking the button, you can hide or disable the button till the result is produced. So that, continuous call will not be made. — Saranya Sadhasivam, Sep 12 '13 at 11:50
@AbdulBasit _how can stop/abort them all._ - for that part it is. rolling back. — Royi Namir, Sep 12 '13 at 11:51
If you set `async: false` then all of the requests will go in order and wait for the previous request to finish. But it definitely sounds like this is more of a user impatience scenario where you should take away the button until the `someFunction()` finishes processing along with all the AJAX calls. — MonkeyZeus, Sep 12 '13 at 12:53

score 2 · Answer 1 · answered Sep 12 '13 at 11:49

2

Yes , $ajax makes new Request on Each Click (Event Fire),

not any Request will be stoped/aborted.

Suggestion : make disable on 1st Click and ,enable it after response comes.

answered Sep 12 '13 at 11:49

score 1 · Answer 2 · answered Oct 10 '16 at 13:46

Your code need to be like this:

    $(document).ready(function(){
    js_Codes();

    /* The rest of your code that will not reload after ajax request */

});

$(document).ajaxComplete(function(){
    /* Here we call the codes that will reload after your ajax request */
    js_Codes();
});

function js_Codes(){

    function clickOpenDialog(){
        $('.btOpenDialog').off('click',clickOpenDialog);
        fn_open_Dialog_Click($(this).prop('alt'), function(){$('.btOpenDialog').on('click',clickOpenDialog);});
        return false;
    };

    function fn_Open_Dialog_Click(myString){
        var myArray = myString.split(';');
        /* whatever u want with your page with a string param array */

    };

    $('.btOpenDialog').on('click',clickOpenDialog);
}

;)

An explanation of why this is the solution would improve the quality of your answer. — colonelclick, Oct 10 '16 at 14:05

score 0 · Answer 3 · answered Sep 12 '13 at 11:53

0

You could store the Ajax request in a variable:

var request = $.ajax({
    type: 'POST',
    url: 'someurl',
    success: function(result){}
});

Then you can abort the request:

request.abort();

If the button is clicked, you only have to check if request is set to make sure only 1 ajax call is made at once.

answered Sep 12 '13 at 11:53

Joren

3,068
25
44

i need to know the behaviour of jquery ajax method. – Abdul Basit Sep 12 '13 at 11:54

score 0 · Answer 4 · answered Sep 12 '13 at 11:55

0

function someFunction() {
    if (this.ajaxPending) return;
    this.ajaxPending = true;
    $.ajax(...).always(function () {
        this.ajaxPending = false;
    });
}

answered Sep 12 '13 at 11:55

A. Wolff

74,033
9
94
155

Jquery Multiple Ajax Request on Button Click

4 Answers4