Enable disable jquery ui using ajax

Question

I am trying to understand the options for turning on / off the jquery ui buttons.

As a rule, in the past for any button that I used:

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

Depending on whether you want to enable / disable, this will be false / true.

This seems to work for jquery ui buttons as well. What I did was check a certain amount and turn off the button the first time the page loads.

But someone can change the value of the account by deleting something (via an 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 it should turn on the button again. Neither prop nor 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 not working in this context when it is working to disable my buttons? Best to use the setter button?

Answer 1

Under the hood, the button was disabled, but you see a button whose style was set using jQuery UI.

jQuery UI does not set styles with the attribute disabled (for example, [disabled=disabled] ). Instead, it adds two classes to the button that contains the disabled button styles: ui-button-disabled , ui-state-disabled .

There are four ways to find out how this will work.

• Recommended method: Call jQuery('.mybutton').button('disable')

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

• This is normal: Call jQuery(".mybutton").prop('disabled', true).button('refresh') . This updates the button user interface.

• Not recommended: Add / remove 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 no longer use the plain-jane <button> element, so changing attributes will not have much effect. jQuery-UI wraps the entire DOM element with helpers, shared events, and other details that require access to accessories.

While you are using .button , stick with the API and use disabled . (This is true for any of the various widgets - datepicker, slider, etc.). Think of the original DOM element as a placeholder for standards, which is only used to preserve functionality with forms, but no more than the main user interface element.