enable disable jquery ui button with ajax

Question

I'm struggling to understand the options of enabling/disabling jquery ui buttons.

Typically in the past for any kind of button I've used:

jQuery(".mybutton").prop('disabled', false);

Depending on whether you want it enabled/disabled it would be false/true.

This seemed to work for jquery ui buttons as well. What I was doing was checking a certain count and disabling the button when you first load the page.

But someone could change the count value by deleting something (via AJAX call):

//delete 
jQuery(document).on("click", ".deletebutton", function() {
    if (confirm("Are you sure you want to delete?"))
    {
        var hash = jQuery(this).data("delete");
        var $this = jQuery(this);
        jQuery.ajax({
           url: "index.php?option=com_cam&task=delete&hash="+ hash +"&"+getToken()+"=1&format=raw",
           dataType: 'json',
           type: "POST",
           success: function(data){
               if (data.type == 'error')
               {
                   //error message printed to user
               }
               else
               {
                   $this.closest("tr").remove();
                   //deleted so decrement and check if you have exceeded your limit

                   count=count-1;
                   if (count >= limit)  
                   {
                           //disable buttons
                           jQuery( ".mybutton" ).button( "option", "disabled", true );
                   }
                   else 
                   {
                       //enable add buttons and hide message
                       jQuery( ".mybutton" ).button( "option", "disabled", false );
                       //jQuery(".mybutton").attr('disabled', false);
                       //jQuery(".mybutton").prop('disabled', false);

                   }
               }
            }
        });
    }
});

Then this should enable the button back again. Neither prop or attr or this post seemed to work for me. Only when I did this:

jQuery( ".mybutton" ).button( "option", "disabled", false );

I guess I don't understand why prop doesn't work in this context when it does work to disable my buttons? Is the best practice to always use the button setter?

Answer 1

Under the hood, the button has been disabled, but, what you see is a button whose style has been set by jQuery UI.

jQuery UI does not set styles using disabled attribute (like [disabled=disabled]). Instead it adds two classes, to the button, which contain the disabled button styles: ui-button-disabled, ui-state-disabled.

There are four ways I know it will work.

1. Recommended Way: Call jQuery('.mybutton').button('disable')

2. Your Way (also recommended): Call jQuery( ".mybutton" ).button( "option", "disabled", true );

3. This is fine: Call jQuery(".mybutton").prop('disabled', true).button('refresh'). This refreshes the button UI.

4. The not recommended way: Add / remove the classes directly from the button. jQuery(".mybutton").addClass('ui-button-disabled ui-state-disabled');

Hope this explains to you why it works this way.

Answer 2

You're no longer using the plain-jane <button> element, so changing the attributes isn't going to have much effect. jQuery-UI wraps the entire DOM element with helpers, separated events, and other details making the option accessor required.

So long as you're using .button, stick with the API and use the disabled setting. (This holds true for any of the various widgets--datepicker, slider, etc.). Just think of the original DOM element as a standards placeholder that's only used to retain functionality with forms, but no longer the primary UI element.