15

I have an ajax call

$('#button1').on('click', function(e){
    $.ajax({
      url:  url,
      type: 'POST',
      async: true,
      dataType: 'json',
      enctype: 'multipart/form-data',
      cache: false,
      success: function(data){

      },
      error: function(){}
    });
    e.stopImmediatePropagation();
    return false;
});

Now here the response is received after 10 minutes . So the ajax call is called multiple times. Why does this happen / how can we ensure that ajax call is called only once?

5
  • 3
    "Now here the response is received after 10 minutes" - What? And how are you firing the call? The code provided isn't the source of the problem
    – Brennan
    Oct 20, 2014 at 21:45
  • It happens on a button call. Updated the code.
    – user544079
    Oct 20, 2014 at 21:47
  • Do you mean that users hit the button more than once because it takes so long?
    – showdev
    Oct 20, 2014 at 21:48
  • Why is your request taking 10 minutes? If you want to prevent the code from calling the ajax source more than once, you can make a variable called "loading" and check/set it before your ajax call and in the success callback Oct 20, 2014 at 21:49
  • 7
    If the user is hitting the button more than once because the response takes so long, set the button to disabled on click, then re-enable it in your success/error callbacks
    – Brennan
    Oct 20, 2014 at 21:50

5 Answers 5

44

An alternative to disabling the button would be to use the .one() method and re-bind the event handler after callback:

var clickHandler = function(e){
    $.ajax({
      url:  url,
      type: 'POST',
      async: true,
      dataType: 'json',
      enctype: 'multipart/form-data',
      cache: false,
      success: function(data){
        $('#button1').one('click', clickHandler);
      },
      error: function(){}
    });
    e.stopImmediatePropagation();
    return false;
}

$('#button1').one('click', clickHandler);
4
  • 1
    With symfony 2 it's the only one way who worked for me :) Thank you
    – LedZelkin
    May 29, 2015 at 22:48
  • 1
    I would like to point out that this solution also works if, by any chance your function is inside a function that executes each time the event is triggered (like link keyup for example), but you want your ajax to be called just once.
    – thvs86
    Aug 2, 2018 at 11:17
  • Yehh it works for me, and i think @thvs86 also right sometime it is happen function inside function. Mar 5, 2020 at 6:51
  • 3
    Adding e.stopImmediatePropagation(); return false; at the end helped for me. Sep 24, 2020 at 6:39
15

I was facing the same issue and it works when I set async: false. Sample code will be like this

$('#button1').on('click', function(e){
    $.ajax({
      url:  url,
      type: 'POST',
      async: false,
      dataType: 'json',
      enctype: 'multipart/form-data',
      cache: false,
      success: function(data){

      },
      error: function(){}
    });
});
3
  • 1
    Its help me a lot. Jul 20, 2017 at 16:00
  • 3
    You should not do that, unless you want your UI to get hanged for sometime
    – Vivek MVK
    Dec 20, 2019 at 4:49
  • I have added a loading image before calling ajax function but image does not display if i use async: false. Not working for me.
    – Kamlesh
    Mar 27, 2020 at 17:33
9

Simply call .off() right before you call .on().

This will remove all event handlers:

$(element).off().on('click', function() {
    // function body
});

To only remove registered 'click' event handlers:

$(element).off('click').on('click', function() {
    // function body
});
6

As per the answer by Brennan,

$('#button1').on('click', function(e){
    $('#button1').attr('disabled', 'disabled');
    $.ajax({
      url:  url,
      type: 'POST',
      async: true,
      dataType: 'json',
      enctype: 'multipart/form-data',
      cache: false,
      success: function(data){
         $('#button1').removeAttr('disabled');
      },
      error: function(){}
    });
    e.stopImmediatePropagation();
    return false;
});

Here the button will be disabled and will be enabled on success

0

For me I have the same problem using jsonp

after 2 minutes without answer $ajax seem to retransmit the request...

I suspect is a browser issue because jsonp is switched to <script... tag

and without answer I suspect the browser restransmits the request after ~ 2 minutes...

My workarround was done by responding anything asap and after 10 minutes my script ask for success or not...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.