views:

43

answers:

1

I am using Jquery buttons (http://jqueryui.com/demos/button/) for my UI. I would like to know how I can show a disabled state. Show the button as greyed out or something, you know how when you post a form on some sites the submit button shows as disabled.

Also is there anyway to display an active state???

This is my code:

 $(".commentsbutton").button({icons: { primary: 'ui-icon-comment'}}); 

<a href="javascript:void[0]">Comments</a>

Help is much appreciated.

UPDATE:

+2  A: 

You can disable the button via the disable method, like this:

$(".commentsbutton").button("disable");​​​​​​​​​​​​​

You can give it a try here, to re-enable later, just use the enable method, like this:

$(".commentsbutton").button("enable");​​​​​​​​​​​​​
Nick Craver
Cheers nick. It works but when I put it inside the function that submits the form it doesn't: $("form#microblogpost").submit(function() { $("#messagesubmitbutton").button("disable"); the #messagesubmitbutton is within the form I am submitting could this affect it???
@user342391 - Is the form being replaced via AJAX? (also make sure not to use element names on ID selectors, `#microblogpost` (without `form`) is much faster). Is this button an anchor, a `<button>` or....?
Nick Craver
Form isn't being replaced via ajax but other elements are when form post is successful. This is the button code:<button style="float:right" id="messagesubmitbutton" class="triangleeastbutton">Microblog it</button>
@user342391 - Are there many of these buttons in the page, or are the IDs being used unique?
Nick Craver
I have pasted the full code above. ID is unique, even changed it to something obscure to be sure.
@user342391 - I don't see in your code where you're calling `.button()` like in the original question...does this look like a normal button or a jQuery UI button?
Nick Craver
Sorry here it is: $(".triangleeastbutton").button({icons: { secondary: 'ui-icon-circle-triangle-e'}});
@user342391 - When is that running? It's not in the code you posted...
Nick Craver
It was running in a separate file. Just moved it. See above. Still same issue
@user342391 - There's nothing standing out at me here, where is `#microblogposts` at, and do you have a link to a site I can see this happening on?
Nick Craver
Thanks for the help Nick. You found the problem. #microblogposts contained links to the Jquery files. Removed them and WORKING!!! Cool cheers mate
@user342391 - Welcome :) glad you got it working!
Nick Craver