How to stop this? Multiple clicks on a button with jquery?

Question

Hi

I think I have a problem with multiple clicks on the same button. I thought I solved it but I think there is 2 problems not the orignal one problem that I thought.

The first problem was if they clicked a button(say a save button) it would do that many save ajax posts.

So if they clicked on it 5 times because they where impatient it would do a save 5 times what in some cases could make the server crash but most of the time just made weird results. So I found a great plugin to make sure duplicate requests could not be made and I thought the problem was solved.

However I have some buttons where you click on it and it makes a jquery ui dialog and I belive that if you click on that button 5 times it messes up the dialog. Like It does not make 5 dialogs but I noticed the controls in the forms don't work all of a sudden.

So if I just click on a button and the dialog is created it works fine. If I click the button 5 times before the dialog is finished rendering I don't see validation errors anymore sometimes the datepicker in it is gone.

It just does not work.

So I think I need something to stop this mass clicking so I was thinking of when one button is clicked all buttons are disabled till it is finished loading up whatever. I am not sure if this is the best way to do it thats why I am asking.

I am also not sure where to put the code. would be great to have it in one global area or something so I don't have to put it in every method.

Thanks

Answer 1

There are endless ways of doing this. I'm more of a core javascript guy, but the general idea is to get all elements that are capable of triggering ajax-calls and disable them.

The exact code will depend on whether you've got a single form with multiple input elements of type 'submit', button elements or if you have multiple forms.

jQuery has an each() method which you can iterate over arrays/objects with.

A non-jQuery solution might look like this:

function enableButtons() {
  var buttons = document.getElementsByTagName("button");
  for (var i=0; i<buttons.length; i++) {
    buttons.disabled = false;
  }
}

function disableButtons() {
  var buttons = document.getElementsByTagName("button");
  for (var i=0; i<buttons.length; i++) {
    buttons.disabled = true;
  }
}

Answer 2

There's a jQuery plugin designed to help prevent user click interference while specific processing takes place:

BlockUI by malsup

(Additional reading: article about BlockUI)

Answer 3

you can disable the submit button after first clicked

$("#submit").click(function() {
    $.ajax("url/to/file.php", data);
    $(this).attr("disabled", "true");
});

and you can also use async option from jquery ajax to block the Page while ajax is being loaded

$.ajax({
   url: "url/to/file.php",
   async: false,
   data: data
});