programatically disable a button on a jquery ui dialog until ajax call complete?

Question

I am using jquery ui dialog, and one of the button's causes an ajax call which takes a few seconds so I want to disable the button after I click it until the ajax call return (then i will enable it).

From googling, I see a few others asking this question but the answers seems very outdated and hacky (based on very old versions of jquery ui). So I was hoping that there was a more elegant way to do this now

How can I programmatically disable or enable a button on an jquery ui dialog?

Answer 1

I think this is what you're looking for:

• the pressed button will be disabled
• a deferred promise will wait until the until the ajax() call is complete
• then deferred action will re-enable the button

::

buttons: {
    "DoAjax": function( e ) {
       //disabling button clicked
       var btnAjax = $(".ui-dialog-buttonpane button:contains('DoAjax')");
       btnAjax.disable(true);

       $.when( $.ajax( "/api/controller/action" ) )
            .then(function( data, textStatus, jqXHR ) {
                 // re-enable pressed button
            btnAjax.disable(false);
            })
      }),
     "Close":

    }

Answer 2

Use this:

$("#dialog-message").dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function() {
            $(this).dialog("close");
        }
    },
    open: function( event, ui ) {
        //disabling button after 3 seconds
        //for all buttons
        setTimeout("$('.ui-button').attr('disabled', 'disabled')", 3000);
        //for first button
        setTimeout("$('.ui-button').first().attr('disabled', 'disabled')", 3000);
    }
});

View demo: http://jsfiddle.net/renishar/db5SX/373/

in this the button programatically disabled after 3 seconds.

Answer 3

You should be able to get the button from the event argument to the button's callback function and disable it. You then save the button in a variable and re-enable in the callback to the ajax request.

For example, with HTML:

<div id="dialog">
    <div id="message">
       Some text
    </div>
</div>

You can do the following:

var n = 0;
$("#dialog").dialog({
    modal: true,
    buttons: {
        "Close": function() {
            $(this).dialog("close");
        },
        'Slow': function(e){
            n++;
            $('#message').html('Fetching...' + n + '...');
            var button_clicked = $(e.currentTarget);
            button_clicked.prop('disabled', true);
            $.ajax({
                url: '/echo/html/',
                type: 'POST',
                dataType: 'html',
                data: {
                    html: 'Updated text',
                    delay: 3
                },
                success: function(data){
                    $('#message').html(data);
                    button_clicked.prop('disabled', false);
                }
            });
        }
    }
});

THe button clicked is disabled while the ajax request is running and enabled again when it answers (you should really add an error handler as well of colurse). I added the counter to illustrate it - clicking while the button is disabled does nothing.

See it working in this fiddle.

Answer 4

You can find the button that you want to change like this:

var dialog = $("#dialog-message").dialog({
    modal: true,
    draggable: false,
    resizable: false,
    position: ['center', 'top'],
    show: 'blind',
    hide: 'blind',
    width: 400,
    dialogClass: 'ui-dialog-osx',
    buttons: {
        "I've read and understand this": function() {

           return true;
        },
        "Another Button" :function(){return true;}

    }

});


var buttons = dialog.parent().find("button");
$(buttons[0]).click(function() {
        $(buttons[0]).prop('disabled', true);
        $.ajax({
                url: "...",
                type: "post", contentType: "application/json",
                success: function (result) {

                       $(buttons[0]).prop('disabled', false);

                }
            });
        });