CODEWITHSUNDEEP
javascripthtml
TPR
TPR

Reputation: 2577

How to disable a clickable element after a user clicks on it?

so if you have a favorite button like on SO, then the user could keep clicking and the favorite thing would keep turning off and on and so-on.

but, it seems like some kind of race condition occurs due to speed clicking and things start being funny and they get back to normal once I refresh the page. The problem seems more to be on UI side than backend, but I can't debug, because that gives the program time and race condition is gone.

I have SET NOCOUNT ON; inside my SQL procedure, in case you're wondering.

So once user clicks on the "favorite" button, what steps should I take to ensure s/he doesn't click on it again till we hear back from the Ajax request?

I am contacting database for every do or undo of favorite... is that bad? (not that related to my original question I guess)

Upvotes: 2

Views: 477

Answers (1)

meder omuraliev
meder omuraliev

Reputation: 186762

Pseudo-code:

anchors = [DOMElement, DOMElement];

anchors.each(function() {

var clickable = true;

el.onclick = function() {
   if ( clickable ) {
       clickable = false;
       ajaxStuff({
         done: function(){ 
            clickable = true;
         }
       })
   }
});

Basically, invoke a function in the context of each of those elements, set a clickable variable, on click execute if clickable is true, then set it to false, and set it back on ajax done.

Upvotes: 2

Related Questions