Search code examples
jquerylivequeryjquery-lint

How can I make this jquery function more terse?


I have this code in a common javascript file in my asp.net project.

jQuery-Lint returns "You've used the same selector more than once" whenever I mouse over one of the buttons that was affected by this function.

//turns all the buttons into jqueryUI buttons
//#mainBody is on the master page, #childBody is on the modal page.
$("#mainBody button, #mainBody input:submit, #mainBody input:button, #childBody button, #childBody input:submit, #childBody input:button").livequery(function () {
    $(this).button().each(function (index) {
                            $(this).ajaxStart(function () {
                                    $.data(this, "old_button_val", $(this).val());
                                    $.data(this, "old_button_disabled", $(this).button("option", "disabled"));
                                    $(this).button("option", "disabled", true).val("Wait...");
                                }).ajaxStop(function () {
                                    $(this).val($.data(this, "old_button_val")).button("option", "disabled", $.data(this, "old_button_disabled"));
                                }).ajaxError(function () {
                                    $(this).val($.data(this, "old_button_val")).button("option", "disabled", $.data(this, "old_button_disabled"));
                                });
                        });
});

A similar question was asked here.


Solution

  • // Might be a good idea now to add a class to these element
    // instead of using a long selector like this
    // Additionally, :button already includes <button> elements
    var selector = "#mainBody input:submit, #mainBody input:button, #childBody input:submit, #childBody input:button";
    
    $(selector).livequery(function() {
        // Store a copy of $(this), which we'll reuse... and reuse... and reuse
        var t = $(this);
    
        // Create the callback function shared berween
        // ajaxStop and ajaxError
        function ajaxCallback () {
            t.button('option', {
                 label: t.data("old_button_val"),
                 disabled: t.data('old_button_disabled')
             });
        }
    
        t.button()
            .ajaxStart(function() {
                // Use $.fn.data instead of $.data
                t.data({
                    // Using 'label' instead of 'val'
                    // because <button> elements do not have 'value's
                    "old_button_val", t.button('option', 'label'),
                    "old_button_disabled": t.button("option", "disabled")
                }).button('option', {
                    disabled: true,
                    label: 'Wait...'
                });
            }).ajaxStop(ajaxCallback).ajaxError(ajaxCallback);
        });
    });
    

    Disclaimer: Not tested, therefore not guaranteed to work.