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":

    }