change text on button using jquery mobile.

Question

I would like to change text on button using jquery mobile. It works if I change data-role to none, but then I lose formatting.

    <fieldset class="ui-grid-a" data-inline="true">
       <div class="ui-block-a"><button class="cl_button1" type="submit" 
       data-theme="c" data-icon="home" data-iconpos="top">Click Me</button>
       </div>
    </fieldset>


 $('.cl_button1').val('some text');

Another posting suggested this, but it did not work.

 $("cl_button1 .ui-btn-text").text("some text");

Answer 1

Using Firebug I found that the HTML markup created by jQuery Mobile is the following:

<fieldset data-inline="true" class="ui-grid-a">
    <div class="ui-block-a">
        <div data-theme="c" class="ui-btn ui-btn-icon-top ui-btn-corner-all ui-shadow ui-btn-up-c" aria-disabled="false">
            <span class="ui-btn-inner ui-btn-corner-all">
                <span class="ui-btn-text">some text</span>
                <span class="ui-icon ui-icon-home ui-icon-shadow"></span>
            </span>
            <input type="hidden" value="">
            <input type="hidden" value="">
            <input type="hidden" value="">
            <button data-iconpos="top" data-icon="home" data-theme="c" type="submit" class="cl_button1 ui-btn-hidden" aria-disabled="false">Click Me</button>
        </div>
    </div>
</fieldset>

You can see that the ui-btn-hidden class has been added to the origional <button> element and the display of the button is actually rendered through the use of the <span> tags above the <button> tag.

So to change the text for this jQuery Mobile rendered element you would use a selector like this:

$('.cl_button1').siblings('.ui-btn-inner').children('.ui-btn-text').text("some text");

Or if you wanted to change the button's text on click you can do this:

$('.cl_button1').bind('click', function () {
    $(this).siblings('.ui-btn-inner').children('.ui-btn-text').text("some text");
});

Here is a jsfiddle for demonstration: http://jsfiddle.net/SfySk/1/

Answer 2

When you said this didn't work:

$("cl_button1 .ui-btn-text").text("some text");

1. You forgot the . before cl_button to indicate that you are trying to select a class
2. I don't see .ui-btn-text anywhere being used as a class

I got your code to work using this:

$('.cl_button1').text('some text');

Test Here: http://jsfiddle.net/S9asF/

Answer 3

$('#buttonx').children('.ui-btn-inner').children('.ui-btn-text').text("Some Text");

Answer 4

in jqm version 1.4.5, after initialization

$('#btn_input').parent().contents().filter(function(){
  return this.nodeType === 3;
}).replaceWith('New Text');

It works without destroying binded events.

Answer 5

A better solution is to refresh the page:

$(currentPage).trigger('create');
$(currentPage).page();

Answer 6

All,

The above solutions do not seem to work with JQM 1.1.1. A very simple way of doing this is to call.

$('.cl_button1').text('some text').button('refresh');

As per http://jquerymobile.com/test/docs/buttons/buttons-methods.html, there are only three methods you can call on a button. This should keep the internal state of your button consistent with the JQM UI adornment, and be more robust against changes to the way buttons are made 'pretty' in the future.