javascript - How to elegantly disableenable all jQuery UI buttons? - Stack Overflow

admin管理员组

文章数量:1356847

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 pleted. 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 pleted.

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.

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 pleted. 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 pleted.

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.

• javascript
• jquery-ui
• jquery

Share Improve this question Follow asked Mar 1, 2011 at 20:06 limclimc 40.2k2222 gold badges104104 silver badges145145 bronze badges 2

• you can use $('input[type=button]').attr('disabled','disable'); to disable all buttons – Rafay Commented Mar 1, 2011 at 20:15
• i'm not sure whether it is, what the OP wants or not – Rafay Commented Mar 1, 2011 at 20:23

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

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 pletely yet, still messing around on jsfiddle.

Update

This should work, example on jsfiddle.

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

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.

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./yui/dom/

You can use

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

本文标签： javascriptHow to elegantly disableenable all jQuery UI buttonsStack Overflow