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?

Solution 1

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

Solution 2

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

Solution 3

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

Solution 4

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

View more solutions