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');
 })