Change button text jquery mobile

Question

I\'m using the new jquery mobile 1.0 alpha 1 release to build a mobile app and I need to be able to toggle the text of a button. Toggling the text works fine, but as soon a

Answer 1

I read through this and various options online and think I may have a simpler solution. It definitely works for links you are turning into a button with the data-role="button" attribute.

Simply put the text of the button in a separate span, and then change the contents of the span in your JavaScript.

e.g.

<a data-role="button" href="#" id="consumed"><span id="oldBtnText">Mark Old</span></a>

Then a simple

$('#oldBtnText').html("Old");

Will do the job. It also shouldn't be a problem if jQuery changes their structure.

Answer 2

<a data-role="button" href="#" id="consumed">Mark Old</a>

You want to:

$('#consumed').text('Mark New');
$('#consumed').button('refresh');

The reason is to enable your changes to be backwards-compatible with future versions of jQuery mobile.

Answer 3

This works for me:

$('#idOfOriginalButton').prev('.ui-btn-inner').children('.ui-btn-text').html('new text');

solution from: http://forum.jquery.com/topic/changing-text-works-except-for-buttons

Answer 4

As of JQM 1.3.1 (maybe earlier?) simple .text() seems to be supported.