Disable click handler when click is fired in jQuery

Question

We have a website built in .NET and jQuery. We have custom jQuery to call the load method on a processing ASP.NET page. That ajax call is fired in a click handler, e.g.

$("#Submit").click(function(){
  $(a_selector).load("Process.aspx?data=" + someDataObject, null, function(){
    alert("Done")});
  }
  return false;
);

Our issue is when we hit the #Submit button the click is fired which calls the ajax to process it. People seem to be double-clicking the button and therefore we're getting multiple results in our database from the dual clicks. Does anyone have an idea on how to prevent this issue? I considered something like disabling the button via JS but I'd like to know of other ideas.

what's wrong with the disabling the button idea?

waqasahmed
– waqasahmed

2009-09-08 17:08:20 +00:00
Commented Sep 8, 2009 at 17:08 — waqasahmed
– waqasahmed, Commented Sep 8, 2009 at 17:08

geowa4 · Accepted Answer · 2009-09-08 17:11:51Z

2

Use the one function of jQuery. This way, the event is only ever fired once. Of course, you should also disable the button so the user knows that clicking on it is futile. In addition, show a spinner, progress bar, or change the cursor styling to indicate to the user that something is happening and the system isn't stuck.

answered Sep 8, 2009 at 17:11

geowa4

42.1k17 gold badges90 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

andres descalzo · Accepted Answer · 2009-09-08 17:16:47Z

0

stop propagation

$("#Submit").click(function(event){
  event.stopPropagation();

  if (typeof $_submitSend == "undefined")
      var $_submitSend = true;
  else if ($_submitSend == true)
      return false;

  $_submitSend = true;

  $(this).attr("disabled", "disabled");

  $(a_selector).load("Process.aspx?data=" + someDataObject, null, function(){
    alert("Done")});
    $_submitSend = false;
    $(this).removeAttr("disabled");
  }
);

answered Sep 8, 2009 at 17:16

andres descalzo

15k14 gold badges66 silver badges119 bronze badges

Comments

Gavrisimo · Accepted Answer · 2009-09-08 17:13:55Z

0

$("#Submit").click(function(){
  $(a_selector).removeClass("class").load("Process.aspx?data=" + someDataObject, null, function(){
    $(this).addClass("class");
    alert("Done")});
  }
  return false;
);

Then just add some specific class without any styling which you will use as a selector. Dont know if it will work the way you want, but it looks like simplest solution to me... :)

answered Sep 8, 2009 at 17:13

Gavrisimo

1,8376 gold badges25 silver badges33 bronze badges

Collectives™ on Stack Overflow

Disable click handler when click is fired in jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related