Changing the value of a jQuery mobile button using

Question

Wondering if you can help me out. I seem to have a problem changing the text of my jQuery Mobile buttons with jQuery.

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

Code above which was recommended for a related question doesn't seem to work.

Neither does:

$("#myButton").attr(value,"New Test");

The code for my button is as followed:

<input type="button" name="answer" id="myButton" data-theme="b" data-answer="4" value="next"></button>

I'll appreciate any feedback guys. Thanks

Answer 1

Update 2
I was working on a fiddle for another question and I noticed that the markup with jQuery Mobile 1.0b2 is a little different:

<div data-theme="b" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-down-b ui-btn-hover-b" aria-disabled="false">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Show Submit Button</span>
    </span>

    <input type="button" name="answer" id="myButton" data-theme="b" data-answer="4" value="next" class="ui-btn-hidden" aria-disabled="false">
</div>

With this markup, you'd need to do the following to change the text for the button:

$('#myButton').prev('span').find('span.ui-btn-text').text("Next Text"); 

---

Update
Credit where credit is due - As it turns out, @naugtur's answer to this question, which made exactly the same point as my edit, was posted before I got around to correcting my original answer.

---

I'm not very familiar with jQuery Mobile and the fact that you were using an <input> for the button didn't register when I initially answered. Here's my updated answer with a working example showing how you might do it.

In the case of an <input type="button" />, jQuery Mobile seems to hide the <input> element and creates a new <a> element that is styled to look like the button. This is why when you try to get and set the text by using the id of the <input> as the selector, it doesn't work since that <span> doesn't have the text that you see on screen. The generated markup looks something like this

<!-- This 'a' button is added dynamically by jQuery Mobile, for the input element that follows it -->
<a role="button" href="#" data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">My Value</span>
    </span>
</a>

<input type="button" data-role="button" value="My Value" id="myButton" name="answer" class="ui-btn-hidden ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow" tabindex="-1" data-theme="c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text"></span>
    </span>
</input>

I haven't tried out enough examples to be completely confident, but this should work

$("#myButton").prev('a').find('span.ui-btn-text').text("New Text")

Here's a working example showing how to change text for both types of buttons (<a> and <input type="button">).

I wouldn't recommend using this over <a> buttons if you can help it though since there isn't an id and my approach, at least, relies on the fact that the <a> corresponding to the <input type="button" /> appears just before the <input> element.

Answer 2

Since jQuery mobile generates HTML around your input type="button" element, and the text that you're seeing isn't actually value of the button, but a text inside of a generated span. You can either traverse the DOM looking for actual span, OR tell jQuery to re-generate button HTML by calling .button("refresh"), like so:

$("#MyButton").val("changed value");
$("#MyButton").button("refresh");

The latter is recommended, since it will stay compatible with future versions of jQuery mobile, while traversing the DOM might break if jQuery team chooses to change structure of the HTML generated for the button.

Answer 3

[deprecated]

Using button inputs has this drawback of not being able to change the attributes of an input in a way that would propagate to jquerymobile's button. Then there is only ne way:

$('#myButton').parent().find('.ui-btn-text').text('zzzzz');

If the input button is not necessary to use the application without any javascript present (or you don't want it to work without javascript) then you should always use <a> tags, because they can be containers.

Answer 4

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 5

this is very easy, there is a method for this, button('refresh')

$('#mybutton').val('new Value').button('refresh');

good luck!

Answer 6

With jquery.mobile-1.1.0 I was experiencing something slightly different and had trouble sifting through the responses to find a workable answer. I've documented the problems I experienced and the solution I found below.

Snippet 1

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').html("Check-in to receive points");
  });
</script>

With this, I'm able to change the text, but the method clears out the added spans and classes, thus compressing the button.

HTML

<div id="task_button">
 <a data-role="button" id="checkin_button" data-transition="slide" data-theme="b" href="#task-success" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-b">
 Check-in to receive points
 </a>
 </div>

Snippet 2

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').val("Check-in to receive points");
  });
</script>

This had no effect upon the button text.

HTML

<div id="task_button">
  <a data-role="button" id="checkin_button" data-transition="slide" data-theme="b" href="#task-success" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-b">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">
      Original Text.
      </span>
    <span class="ui-icon ui-icon-check ui-icon-shadow ui-iconsize-18">&nbsp;
 </span>
</span>
</a>
</div>

Snippet 3

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').val("Check-in to receive points").button("refresh");
  });
</script>

This generated the following error message:

cannot call methods on button prior to initialization; attempted to call method 'refresh'

Which was confusing to me because this function is being called only after the page is initialized. Reading further, I then noticed Priyank's reference to a working answer at stackoverflow.com/a/7279843/61821

Snippet 4 - Working

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button .ui-btn-text').val("Check-in to receive points");
  });
</script>

A better jQuery selector works like a charm.