Question

I’ve got a toggle switch component in jQuery Mobile (jsfiddle here)

<select name="toggle" id="toggle" data-role="slider">
    <option id="value1" value="off">value1</option>
    <option id="value2" value="on">value2</option>
</select> 

I want to be able to change the displayed text programmatically at any given moment.

e.g. “value1” should become “newvalue1” and “value2” should become “newvalue2”.

This function should re-create the toggle-switch with the new values, but actually it does nothing:

function yourfunction() { 
    //alert ("Changing stuff");
    $('#value1').html ('newvalue1');
    $('#value2').html ('newvalue2');
    var myswitch = $("#toggle");
    myswitch.slider("refresh", true);
}
window.setInterval(yourfunction, 3000);​

Answer 1

Does this work for you?

• http://jsfiddle.net/aD5xD/13/

JS

function yourfunction() { 
        //alert ("Changing stuff");
        $('.ui-slider-label-a').text('newvalue1');
        $('.ui-slider-label-b').text('newvalue2');
        var myswitch = $("#toggle");
        myswitch.slider("refresh", true);

    }
window.setInterval(yourfunction, 3000);​

jQM Adds a class for both options ( ui-slider-label-a and ui-slider-label-b ), by using these classes you can access the correct element and change the text.

NOTE: The best way to see the additional markup jQM adds is to use Google Chrome ( IMHO ) and inspect the element