Disable multiple Ajax requests when a link is Cliked

Question

Hi guys,

I am trying to implement a way to avoid click spamming. I have a Link button that when clicked sends the request to the server using Jquery $.ajax() command. I want a way to prohibit multiple clicks like the one implemented here in StackOverflow when adding a comment.

Any suggestion ?

Answer 1

You can do something like this...

$("#buttonId").click(function(){
    $(this).attr("disabled", true);
    $.ajax({}); // Your ajax call.
});

Answer 2

You can block the UI while the ajax request is done. Give a look to the blockUI plugin for this

Answer 3

It really depends on the type of element, but for hyperlinks you probably need to unbind the click event and rebind it when the ajax request has completed:

function ajaxThingie() {
    $(this).unbind("click");

    // do something ajaxy, and in the success callback rebind:
    $.get("foo.html", function() {
        $(this).bind("click", ajaxThingie);
    });
    return false;
}


$(document).ready(function() {
    $("#theLink").click(ajaxThingie);
});

Answer 4

jQuery has the .one() method designed for this purpose. An (untested) example:

function doAjax(){
    // Your Ajax call.
    $.ajax({..., success: function() {
        // Ajax call done, re-enabling the button/link
        $("#buttonId").one('click', doAjax);
    }, ...});
}

$("#buttonId").one('click', doAjax);