CODEWITHSUNDEEP
javascriptjqueryajax
user544079
user544079

Reputation: 16629

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?

Upvotes: 17

Views: 72786

Answers (7)

Mayank Budhlakoti
Mayank Budhlakoti

Reputation: 1

I was facing the same issue and updating async to true did the trick for me. Sample code:

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);

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 76508

You can do it with one(), as shown in other actions, or you can also create a deactivation logic for the click handler which can be reactivated whenever you need. In the example below go will work exactly once, unless again is clicked, in which case go is again reactivated for the purpose of a single event handling. This is handy if you want to reuse the same button multiple times to send AJAX, but you want to deactivate its event while waiting for a response. Of course, the disabled HTML attribute is also your friend.

$('#button1').on('click', function(e) {
    if (!this.classList.contains("foo")) alert(1);
    this.classList.add("foo");
    this.value = "waiting";
});

$('#button2').on('click', function(e) {
    let btn = $('#button1');
    btn.removeClass("foo").val("go");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="button" id="button1" value="go">

<input type="button" id="button2" value="again">

Upvotes: 0

Andre Garcia
Andre Garcia

Reputation: 1

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...

Upvotes: 0

Pankaj Shinde
Pankaj Shinde

Reputation: 3689

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
});

Upvotes: 10

George John
George John

Reputation: 2767

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(){}
    });
});

Upvotes: 15

Dave
Dave

Reputation: 10924

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);

Upvotes: 45

user544079
user544079

Reputation: 16629

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

Upvotes: 6

Related Questions