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

I've updated my answer - I was working under the incorrect assumption that the markup would be similar - it's not and I've provided a working example for how you might achieve this with `input` buttons. — no.good.at.coding, May 09 '11 at 14:48
Correct answer here: http://stackoverflow.com/a/7279843/61821 — Priyank Bolia, Jul 12 '12 at 16:58

score 32 · Answer 1 · answered Feb 24 '12 at 21:04

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.

This doesn't work for me and produce this error: Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'refresh' — Yako, Mar 24 '13 at 09:55

no.good.at.coding · Accepted Answer · 2011-08-13T23:56:59.983

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.

thanks @no.good. I changed it but it doesnt make a difference. even when i call `alert($("#a_but .ui-btn-text").length)` the value return from the call returns 0. which means its probably down to the incorrect selector — L-Samuels, May 07 '11 at 14:55
finally i found what the problem is. Although `` renders the buttons the same as `old Text` it is the latter that allows you to change the button text with `$("#a_but .ui-btn-text").text("new text");` — L-Samuels, May 07 '11 at 15:38
@Lawrence88 My apologies for the earlier irrelevant answer - you are right about the difference in behaviour, please see my updated answer that explains how the markup is different and why this doesn't work for buttons created from `` elements and a workaround that shows how you can still do it. — no.good.at.coding, May 09 '11 at 14:44
yeah thanks for that @no.good. that was nicely clarified. Anonymous downvote? I dont get what u mean? Are you saying I down-voted u? — L-Samuels, May 09 '11 at 22:58
@Lawrence88 Someone downvoted my previous answer but didn't indicate why. That comment wasn't directed at you [unless *you* downvoted :)] - but at whoever did - no big deal! — no.good.at.coding, May 10 '11 at 18:29
@naugtur I didn't think that the answer was incorrect, not the solution to the problem as it turns out, yes, but the markup was certainly invalid and could have been the reason for strange behaviour and so I feel that a downvote wasn't necessary. But I also must apologize about my edit, I had not seen your answer until you pointed it out now; if I had, I wouldn't made an edit that was so similar. I certainly didn't copy it but this feels icky, like I actually did cheat :( I'm really sorry about this. A +1 since you really did get the answer first. — no.good.at.coding, May 11 '11 at 14:25
Oh, it's not about the rep and I don't want to make a big deal out of this - but I honestly didn't see your answer and I'm feeling lousy about this and I wanted to make it right, that's all :) — no.good.at.coding, May 11 '11 at 17:22
-1 > The correct approach here is to run `$('#myButton').button('refresh')` after a DOM update see @kovac below. — Steven de Salas, Apr 20 '12 at 15:30

naugtur · Answer 3 · 2012-04-21T19:28:04.827

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.

edited Apr 21 '12 at 19:28

answered May 09 '11 at 11:22

naugtur

16,827
5
70
113

1

-1 > The correct approach here is to run $('#myButton').button('refresh') after a DOM update see @kovac below. – Steven de Salas Apr 20 '12 at 15:31
But the question is still relevant (I was looking for the answer a couple days ago) when I bumped into this post. Kovac below is correct. – Steven de Salas Apr 22 '12 at 18:51

cluther · Answer 4 · 2012-08-11T12:52:10.913

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.

button image

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.

button image

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.

score 0 · Answer 5 · answered Feb 08 '19 at 18:46

0

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

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

good luck!

answered Feb 08 '19 at 18:46

josue alvarez

1
1

score 0 · Answer 6 · answered Oct 21 '11 at 23:07

0

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

answered Oct 21 '11 at 23:07

Yuval A.

5,849
11
51
63

brodybits · Answer 7 · 2012-03-21T15:54:38.260

-2

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");

edited Mar 21 '12 at 15:54

answered Mar 21 '12 at 14:56

brodybits

541
4
21

Changing the value of a jQuery mobile button using jQuery

7 Answers7

Linked