Changing the value of a jQuery mobile button using jQuery

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 te         


        

Answer 1

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

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

good luck!

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

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 4

Updated the following works for me (similar to the answer from kovač):

$('#MyButton').html('changed value').button('refresh');

or

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

Answer 5

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 6

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