jquery-mobile - jQuery mobile button staying pressed

Question

I have a jQuery mobile button hooked up to an ajax POST. If the POST fails, the jQuery mobile button stays pressed instead of ``popping up". Any ideas?

Answer 1

It can be done easily.

Here a jsFiddle example made for one of my previous answers: http://jsfiddle.net/3PhKZ/7/

If you take a look there's this line of code:

$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-focus');

It will try to find pressed button on a current active page, if it succeed it will remove 2 classes responsible for a button pressed state. Unfortunately pure CSS solution is impossible here. You can test this example, just comment top line and see what will happen.

One last thing selector $.mobile.activePage can only be used during the pagebeforeshow, pageshow, pagebeforechange, pagechange, pagebeforehide and pagehide page event so takes this into account.

In case you cant use this selector just replace it with a page id, like this:

$('#pageID').find('.ui-btn-active').removeClass('ui-btn-active ui-focus');

So your final code would look like this:

$.ajax( "example.php" )
.success(function() { doStuff(); })
.error(function() { 
    $('#pageID').find('.ui-btn-active').removeClass('ui-btn-active ui-focus');
 })

Answer 2

Add an error clause to your AJAX handling which pops the button back.

$.ajax( "example.php" )
.success(function() { doStuff(); })
.error(function() { /*code to unpress button here*/ })

Answer 3

For those folks out there using "input" and not "anchors" as buttons. When using for instance "submit" and "reset" buttons and pressing them they remain as active, which is sometimes undesired depending on the actions performed when the buttons is clicked.

I am not sure if it is the expected behaviour, I have read that is a jQuery mobile bug, but the behavior is still present at least in jQM 1.3.2

An yes the trick is to remove the active class as stated however those get tricky because the class is not added to the input tag, i*t is added to a parent DIV* that is created by all of the ugly stuff around the "input" to style the button, that is why removing the active class when selecting the input doesn´t work.

By analyzing the HTML produced by jquery mobile a workaround is to:

remove the active class on the input parent instead of the actual input element.

$('.mybutton_class_or_ID').parent().removeClass('ui-btn-active');

I prefer this approach instead of clearing all the active classes across the whole page in case you want to be more selective with the class removal.