Question

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.

Answer 1

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