Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent ajax call from firing twice

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?

like image 868
user544079 Avatar asked Oct 20 '14 21:10

user544079


People also ask

How do I stop multiple ajax calls from repeated clicks?

click(function(e) { e. preventDefault(); if ( $(this). data('requestRunning') ) { return; } $(this). data('requestRunning', true); $.

What happens when one ajax call is still running and you send an another ajax call before the data of first ajax call comes back?

Since Ajax calls are asynchronous, the application will not 'pause' until an ajax call is complete, and simply start the next call immediately. JQuery offers a handler that is called when the call is successful, and another one if an error occurs during the call.


4 Answers

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);
like image 146
Dave Avatar answered Sep 28 '22 10:09

Dave


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(){}
    });
});
like image 39
George John Avatar answered Sep 28 '22 10:09

George John


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
});
like image 26
Pankaj Shinde Avatar answered Sep 28 '22 12:09

Pankaj Shinde


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

like image 41
user544079 Avatar answered Sep 28 '22 10:09

user544079