This looks like an easy topic but in reality truth is far from it. Button is probably the most commonly used jQuery mobile widget, surprisingly a lot of people don’t understand how it works. While it is represented as one widget in truth a button is formed from two different components. One button is formed from a classic input tag and second one is formed from an <a> tag.
 
 

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


 

1. <input> tag and <button> tag buttons

 
 
This is a standard HTML button, of course type=”button” attribute is also needed (in case of a input tag button). Amazingly this is also a less used jQuery Mobile button type.
 
Example:
 
<input type="button" value="Click me" class="button-example"/>
 

2. <a> tag button

 
 
Second button type is unique only to the jQuery Mobile. It is formed to <a> tag in combination with a data-role=”button” attribute. There’s another exception, header and footer <a> tag buttons don’t require data-role=”button” attribute.
 
Example:
 
<a href="#second" data-role="button">Next</a>
 
or:
 
<a href="#second" class="ui-btn-right">Next</a>
 
 

What’s the problem then?

 
 
For those of you who have read official documentation, button should be able to be disabled through this simple javascript:
 
$(".button-example").button("disable");
 
There’s one problem here, this is not explained in the official documentation, only input/button tag buttons can be disabled this way, in case this method is used on a a tag button this error will be thrown:
 
cannot call methods on button prior to initialization; attempted to call method ‘disable’
 
Test it in this jsFiddle example: http://jsfiddle.net/Gajotres/KZQqd/
 
 
This error will occur because only input tag button has a disable property. Remember when I told you that button widget consists of two components? Well, this is it, most of a button method will work only on an input tag button.
 

Disable/enable <a> button

 
 
To disable a tab button we will need to play with a javascript a bit.
 
$('.button-example').prop('disabled', true).addClass('ui-disabled');
 
In this example, prop function will disable this element and addClass function will gray out button visual style. This way, visually, disabled a tag button will look just like disabled input/button tag button. If this button has also events bound to it, that same events will be also disabled.
 
Test it in this jsFiddle example: http://jsfiddle.net/Gajotres/YFMsR/
 
 

Who Am I?

Between working as a senior Java developer in one of the largest insurance companies in the world and traveling, in my free time, I work as a professional mobile development adviser. I'm also a major jQuery Mobile supporter back at StackOverflow and a forum moderator at the official Ionic Framework forum.

Blogs worth reading

If you're here looking for information related to the Ionic Framework, you will also like these blogs:






  • V

    Thanks! This was useful 🙂

  • Gab

    Thx !

  • Stephen Dondley

    Awesome, you solved my problem.

  • A Ha’penny WIll Do

    Thank you SO much for clarifying this. I’ve been working with jQM since it’s inception and this problem has always annoyed the hell outta me (and the same goes for “selectmenu”, and its wrapper). I’ve always known the workarounds, but this morning I finally decided to google why because I’m upgrading some old code.

    Do you know if they’re planning to standardize this in jQM 1.5? I read in some stackoverflow comment that they’re going to kill the button widget for objects.