CODEWITHSUNDEEP
jqueryjquery-uibutton
Andrei R
Andrei R

Reputation: 5168

How do I replace jQueryUI button text?

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?

Upvotes: 31

Views: 22892

Answers (6)

mikehoncho
mikehoncho

Reputation: 51

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

Upvotes: 3

user1464277
user1464277

Reputation: 231

You need to do .button("refresh")

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

Upvotes: 0

Stephen O&#39;Flynn
Stephen O&#39;Flynn

Reputation: 2329

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

Upvotes: 1

gnarf
gnarf

Reputation: 106322

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

Upvotes: 64

ajpiano
ajpiano

Reputation: 109

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

Upvotes: 6

psychotik
psychotik

Reputation: 39009

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

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

Upvotes: 0

Related Questions