Programmatically disable a button in a jquery ui dialog before ending ajax call?

Question

I use jquery ui dialog , and one of the buttons calls an ajax call, which takes a few seconds, so I want to disconnect after I click on it, until the ajax call comes back (then I turn it on).

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

How can I programmatically disable or enable a button in a jquery ui dialog box?

Answer 1

I think this is what you are looking for:

• the pressed button will be disabled.
• pending promise will wait until ajax() call is complete
• then the pending action will turn on the button again

::

 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); } }); 

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

in this case, the program automatically shuts down after 3 seconds.

Answer 3

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

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 clicked button is disabled when the ajax request is started and turned on again when it answers (you really have to add an error handler as well as a colurse). I added a counter to illustrate it - clicking when the button is disabled does nothing.

See how this script works .

Answer 4

You can find the button you want to change as follows:

 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); } }); });