Question

I have a little problem, and I can’t figure out where does it come from.
I’m using jQuery UI (and of course jQuery)

I have the following HTML:

   <input type="checkbox" id="test" value="test"/>
    <label for="test">Show Test</label>
    <div id="checkedDiv"></div>

and the following JS:

function clickChange() {
    var currentText = this.nextSibling.innerHTML;
    this.nextSibling.innerHTML = 
    (this.checked) ? currentText.replace("Show","Hide") :
                     currentText.replace("Hide", "Show");
    $("#checkedDiv").text(this.nextSibling.innerHTML);
}

var test=document.getElementById("test")
test.onclick=clickChange;
$("#test").button();

The problem is that on the first click, the innerHTML doesn’t change. After that it works.
And to be a little more disappointed, the nextSibling seems to change (at least from what is seen in the #checkedDiv), but doesn’t appear on the DOM Tree on firefox/firebug.

Am I missing something ?

Thanks
(if you want to try it yourself, it’s here: http://jsfiddle.net/nvNKW/3/ )

EDIT:

The (or at least one) solution is to use label as suggested by Aziz Shaikh:

function clickChange() {
    var currentText = $(this).button( "option","label");
    $(this).button( "option","label",(this.checked)? currentText.replace("Show","Hide") : currentText.replace("Hide", "Show"));
}

And there is no need to change the html or the button initialisation.

Answer 1

Try setting the label using $("#test").button({ label: newText }); instead of this.nextSibling.innerHTML

Edit: So your fixed JS function would be:

function clickChange() {
    var currentText = this.nextSibling.firstChild.innerHTML;
    var newText = (this.checked) ? currentText.replace("Show","Hide") : currentText.replace("Hide", "Show");
    $("#test").button("option", "label", newText);
    $("#checkedDiv").text(this.nextSibling.innerHTML);
}