How do I replace jQueryUI button text?

Question

I've got a button that I use with jQueryUI somethink like this (simplified).

<button id="mybutton">Play<button>
<script>
$("#mybutton").button().toggle(
    function(){
       $(this).text('Stop');
    },
    function(){
       $(this).text('Start');
    },
);
</script>

This code breaks the way the button looks because when making it into the button widget, there's a new span added inside the button. So I'm changing the button value like this now

$(this).find('span').text('Stop');

This is hacky because I can't treat the button as a black box anymore and have to go inside.

Is there a clean way to do this?

score 64 · Accepted Answer · answered Apr 19 '10 at 08:24

64

Maybe you could use the label option of the jQuery UI button now instead?

$("#mybutton").button().toggle(function() {
   $(this).button('option', 'label', 'Stop');
}, function() {
   $(this).button('option', 'label', 'Start');
});

jsbin preview here

answered Apr 19 '10 at 08:24

gnarf

105,192
25
127
161

1

for clarity you can also do something like this: `$(this).button({label:'Stop',icons:{secondary: "ui-icon-circle-close"}});` This is helpful if you want to change other things as well, such as the icon, etc. – roberthuttinger May 05 '14 at 18:42

score 6 · Answer 2 · answered Apr 19 '10 at 08:14

6

You can use the .button("refresh") method after you alter the text.

$("#mybutton").button().toggle(
    function(){
       $(this).text('Stop').button("refresh");
    },
    function(){
       $(this).text('Start').button("refresh");
    },
);

http://jqueryui.com/demos/button/#method-refresh

answered Apr 19 '10 at 08:14

ajpiano

109
2

i even tried pretending that i'm creating the button from scratch and it still doesn't work $(this).text('Start'); $(this).button(); Breaks the button as well – Andrei R Apr 19 '10 at 08:22
This works, but it seems to remove the other existing properties on the button.. Gnarf's answer seems to work the best if all you want to do is change the text while leaving the other properties alone. – Chris Dec 12 '13 at 19:31

score 3 · Answer 3 · answered Dec 10 '14 at 18:08

after calling .button() to make a jQuery UI button, the text seems to be removed from the original button element and placed in a <span class = ui-button-text></span> within the button element.

Something like this would work:

$("#myButton > .ui-button-text").text("New Text");

score 1 · Answer 4 · answered Dec 12 '11 at 17:54

I don't know if you're still looking for an answer to this, but I found your question. If you look at the code from the button, jQuery adds a tag or two. So instead of rewriting the entire thing, I replaced the button .html() with the same html but used javascript search() to switch out the label. It's ugly, but it works. It also uses the button label to switch correctly.

var bdef = $(this).html();
var ht = "";
if (bdef.search("Nuevo") != -1) { 
    ht = $(this).html();
    $(this).html(ht.replace("Nuevo", "Lista"));
}
else {
    ht = $(this).html();
    $(this).html(ht.replace("Lista", "Nuevo"));
}

score 0 · Answer 5 · edited Jul 20 '12 at 20:54

0

You need to do .button("refresh")

$('#mybutton').text('Save').button("refresh");

edited Jul 20 '12 at 20:54

Taryn

242,637
56
362
405

answered Jul 20 '12 at 16:41

user1464277

231
3
6

score 0 · Answer 6 · answered Apr 19 '10 at 07:57

0

Is the id of the button always myButton? If yes, then just use

$("#myButton").text('Stop');

answered Apr 19 '10 at 07:57

psychotik

38,153
34
100
135

2

how's that span added? If inside `myButton` then it won't work, obviously. You can do this in that case: $("#myButton span").text('Stop'); which is equivalent to your code. Why is that span _inside_ the button tag though? That sounds wrong... – psychotik Apr 19 '10 at 08:11
yeah. that's kind of what i'm doing, but i don't want to do it that way. – Andrei R Apr 19 '10 at 08:13
umm... whats the origin of that span then? I don't see how you can do this any other way without getting rid of the span. – psychotik Apr 19 '10 at 08:22

How do I replace jQueryUI button text?

6 Answers6

Linked