How to elegantly disable/enable all jQuery UI buttons?

Question

I currently have several action buttons in different pages, and each button performs some AJAX call when clicked. In another word, I have code like this all over the places:-

$("#searchButton")
    .button()
    .click(function() {
        ...
        $.get(url, { data: ...},  function(data) { ... });
        ...
    });

After doing some testing, it seems like some AJAX calls take at least more than a few seconds to process before the callback function is being called.

My plan is to disable the button when the AJAX call is made and enable it back when the AJAX call is completed. This is to prevent user from clicking the button too many times when the request is being processed. One solution I found is to utilize the unbind() and bind() functions. After modifying my code, it looks like this now:-

var searchButtonClickHandler = function() {
    ...
    $.get(url, { data: ...},  function(data) { ... });
    ...
};

$("#searchButton")
    .button()
    .ajaxStart(function() {
        $(this).button("disable").unbind("click");
    })
    .ajaxStop(function() {
        $(this).button("enable").bind("click", searchButtonClickHandler);
    })
    .click(searchButtonClickHandler);

This code works fine. Basically, it removes the click handler when the AJAX call is made and addes the click handler back when the AJAX call is completed.

My question is... is it possible to generalize the button disabling/enabling so that I don't have to implement ajaxStart() and ajaxStop on all UI buttons?

Ideally, I would like to use my earlier code snippet to register only the click event handler on the button, and then enable/disable all buttons using the .ui-button selector, something like this...

$(".ui-button")
    .ajaxStart(function() {
        $(this).button("disable").unbind("click");
    })
    .ajaxStop(function() {
        // not sure how to bind the handler here
        $(this).button("enable").bind("click", ?? );
    });

... but, this doesn't work and I run into trouble in binding the click handler here.

The more I think about it, it almost seems like I need to create a button builder function to do this, for example:-

var createButton = function(selectorName, clickHandler) {
    $(selectorName)
        .button()
        .ajaxStart(function() {
            $(this).button("disable").unbind("click");
        })
        .ajaxStop(function() {
            $(this).button("enable").bind("click", clickHandler);
        })
        .click(clickHandler);
};

// create button like this
createButton("#searchButton", function() {
    ...
    $.get(url, { data: ...},  function(data) { ... });
    ...
});

... but this approach will only disable/enable the selected button, and I want to apply that to all UI buttons.

Do anyone has a better approach in disabling/enabling all the buttons in the page?

Thanks.

you can use `$('input[type=button]').attr('disabled','disable');` to disable all buttons — Rafay, Mar 01 '11 at 20:15

score 5 · Accepted Answer · edited May 23 '17 at 12:28

Different approach, according to this answer you should be able to get a reference to your previous event handler via .data("events");

Putting that together with your sample it should look like this:

$(".ui-button")
    .ajaxStart(function() {
        var events = $(this).data("events");
        $(this).data("oldEvent", events.click[0]);
        $(this).button("disable").unbind("click", events.click[0]);
    })
    .ajaxStop(function() {
        var oldClick = $(this).data("oldEvent");
        $(this).button("enable").bind("click", oldClick.handler);
});

~~Not sure if this will work completely yet, still messing around on jsfiddle.~~

Update

This should work, example on jsfiddle.

Thanks... I got it working on my code too. This is indeed a more elegant solution than what I have. — limc, Mar 01 '11 at 21:34

score 1 · Answer 2 · answered Mar 01 '11 at 20:34

1

you can use $('input[type=button]').attr('disabled','disable'); to disable all buttons instead of binding and unbinding click event to the buttons... also you can use deferred jquery object, here is an example

answered Mar 01 '11 at 20:34

Rafay

30,950
5
68
101

I cannot use that selector because the buttons are created using `` tag, which is decorated using jQuery UI's `button()`. – limc Mar 01 '11 at 21:09

score 0 · Answer 3 · answered Jan 31 '15 at 21:02

0

You can use

$("button").each(function(){
    //your code here
});

answered Jan 31 '15 at 21:02

user4515563

1

How is this related to the question? – Jarlax Jan 31 '15 at 21:24

score 0 · Answer 4 · answered Mar 01 '11 at 20:11

0

Maybe you could attach your handler to the parent element of your buttons with delegate? That way there's only one handler function to bind/unbind.

answered Mar 01 '11 at 20:11

Gareth

5,693
3
28
37

score 0 · Answer 5 · answered Mar 01 '11 at 20:13

0

Yahoo hosts a getElementByClass function, and you could assign a class such as "disableMe" to all your UI buttons. Then use getElementByClass('disableMe') to return an array of all the elements you want to disable.

The link: http://developer.yahoo.com/yui/dom/

answered Mar 01 '11 at 20:13

Kyle Macey

8,074
2
38
78

2

Wow, way to miss the jQuery bandwagon! – Roatin Marth Mar 01 '11 at 20:22

How to elegantly disable/enable all jQuery UI buttons?

5 Answers5