Ajax and Preventing Double "submit"

Question

I am dealing with an outdated application in which they use [a] tags for many Ajax "sends" formats. If we used the [input] buttons, we could just set the disable attribute of the [input] tag. But when disabling hyperlinks is not part of the specification and is not a consistent cross-browser.

We are looking for a simple solution to block additional clicks on a hyperlink.

Note: we use JavaScript with jQuery

Answer 1

The womp solution is a very easy way to do this.

However, if you need something a little easier, I would probably use semaphore . Just set the submit flag and check if the semaphore is set when the user clicks the link. You can do this by setting a flag on the DOM itself or using a global boolean value.

$('#link').each(function() { this.submitting = false; }).click(function() { if (!this.submitting) { this.submitting = true; var self = this; $.ajax({ success: function() { self.submitting = false; }, error: function() { self.submitting = false; // make sure they can try again } }); } }); 

I obviously cut the $ .ajax call, but I think you get the point.

Edit: Er ... in fact, forgot the most important part. The representation of if (!).

Answer 2

In your "click" handler, either return false or prevent by default -

 $('#target').click(function(e) { e.preventDefault(); alert('Handler for .click() called.'); }); $('#target').click(function(e) { alert('Handler for .click() called.'); return false; }); 

Hmm ... to only press a button once (throughout the page), perhaps use .data () -

http://api.jquery.com/data/

Or switch the attribute.

Answer 3

I like the Ben Nadel procedure for handling this .

Essentially, you create a wrapper around the jQuery.ajax function, and you can create all kinds of things that happen for every ajax request in your application. One such thing is query tracking.

You will see that in his getJSON wrapper method, it accepts an optional "name" parameter for the request name. It can be anything, it’s just the key to determine where the request came from. In your case, this will be delivered every time the link is clicked. If the name parameter exists, it stores it in the tracking collection.

If another call arrives with the same request name, it is simply dropped. As soon as the original request returns, it clears the tracking flag for this request name.

This method is great for distributing many common functions to all ajax requests in your application. I created a multi-request handler that also allows you to determine the behavior of new requests - whether it will abort any existing ones or just drop it. This is useful if you want the last request to be processed, for example, to autocomplete.

Answer 4

What happens when these links make an ajax request? If so, you can look at it.

http://www.protofunc.com/scripts/jquery/ajaxManager3/ (and not version 3.05 in the repository you might want).

It has the ability to stop repeated ajax requests.

You can also watch

http://jquery.malsup.com/block/

They click on the link and the download sign appears, and they can no longer click on this link.

Answer 5

For all events that cause an ajax call, it’s good to use to add a loading layer to the parent component or to the whole page in the first place, to prevent the launch of a new event, and on the other hand, to inform the user that the loading data continues. You can do this using jQuery BlockUI Plugin , which is very simple to implement.

Answer 6

 var fooObj = { isAdd : true, add : function(){ if(fooObj.isAdd == true){ fooObj.isAdd = false; var opt = { url : 'http://yoururl.com', type : 'post', success : function(response){ if(response=='save'){ fooObj.isAdd = true; } } } $.ajax(opt); } } } 

I think it works. I also notice that IE Browser responds slowly when using ajax.