Change button text jquery mobile

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 as you perform the text replacement the css formatting gets broken.

Screenshot of the messed up formatting: http://awesomescreenshot.com/03e2r50d2

    <div class="ui-bar">
        <a data-role="button" href="#" onclick="Podcast.play(); return false" id="play">Play</a>
        <a data-role="button" href="#" onclick="Podcast.download(); return false" id="download">Download</a>
        <a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">Mark Old</a>
    </div>

$("#consumed").text("Mark New");

When you create the button it adds some additional elements, some inner <span> elements that look like this:

<a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">
  <span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">Mark Old</span>
  </span>
</a>

To change the text, you'll want this selector:

$("#consumed .ui-btn-text").text("Mark New");

<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.

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.

I wrote a simple plugin to do this for either a link based button, or an <input type="button"> button. So if you have

<input type="button" id="start-button" val="Start"/>

<a href="#" data-role="button" id="start-button">Start</a>

Either way, you can change the displayed text with

$("#start-button").changeButtonText("Stop");

Here's the plugin:

(function($) {
    /*
     * Changes the displayed text for a jquery mobile button.
     * Encapsulates the idiosyncracies of how jquery re-arranges the DOM
     * to display a button for either an <a> link or <input type="button">
     */
    $.fn.changeButtonText = function(newText) {
        return this.each(function() {
            $this = $(this);
            if( $this.is('a') ) {
                $('span.ui-btn-text',$this).text(newText);
                return;
            }
            if( $this.is('input') ) {
                $this.val(newText);
                // go up the tree
                var ctx = $this.closest('.ui-btn');
                $('span.ui-btn-text',ctx).text(newText);
                return;
            }
        });
    };
})(jQuery);

... because sprinkling your code with dependencies on exactly how jQuery Mobile renders these buttons is not a good idea. Programming rule: if you gotta use a hack, isolate it to a well-documented, re-usable chunk of code.

Change button text jquery mobile

Related

Recent Posts