CODEWITHSUNDEEP
jqueryajax
neilakapete
neilakapete

Reputation: 1178

cancel current event click and ajax call when another button is pressed

My problem is that if I click a button and the ajax has not returned yet and I click another button (or the same button) then I end up getting two tables on screen instead of one.

Scenario : I am building a form and presenting a set of options based of drop down selections. Year/Make/Model combo's bring back a set of product lines - Carpets/Bumpers/Floor Mats/ Sound Deadners etc. Each one of those will become a button and when pressed will bring back the products for that product line.

The products are then looped over and I create a table via javascript to display them. If I push a button once and wait for the table to be displayed everything is good. If I choose another product line the products table is removed and then the ajax call returns the new products and build them into a table again via javascript. The problem I get is when the same button or a different product line button is clicked before a table is built from the first click I get two tables showing.

Upvotes: 0

Views: 922

Answers (3)

Sinetheta
Sinetheta

Reputation: 9429

You could use .one() to bind a single click handler, then rebind it when your ajax is finished. A little less work than turning it off and on.

function clickhandler(){
  //your button actions
}

//the doc ready bind
$(yourButton).bind('click',clickhandler);

$.ajax({
    url:'your url',
    complete : function(){
        //rebind it when it's safe to do so again
        $(yourButton).bind('click',clickhandler);
    }
});

Upvotes: 0

Manse
Manse

Reputation: 38147

Without really understanding your question due to is vague nature I can only really suggest looking at the following -> the jQuery AJAX Global events

Specifically the .ajaxStart() and .ajaxComplete() methods you could use these to disable buttons with the same class on ajaxStart - then re-enable them on ajaxComplete

Example :

$(document).ajaxStart(function(){ 
  $('.buttonsclass').attr('disabled','disabled');; 
}).ajaxComplete(function(){ 
  $('.buttonsclass').removeAttr('disabled');
});

Upvotes: 2

ShankarSangoli
ShankarSangoli

Reputation: 69905

You can abort the previous ajax request using abort() method of xhr object. Try this

$(document).ready(
     var  xhr = $.ajax({
            url: 'url',
            success: function(data) {
                //do something
            }
        });
    };

    //If you want to abort this call on some condition just do this
    xhr.abort();
);

Upvotes: 1

Related Questions