CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
janesconference
janesconference

Reputation: 6473

changing the option text in a flip toggle switch in jQuery Mobile

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

Upvotes: 2

Views: 2502

Answers (2)

Phill Pafford
Phill Pafford

Reputation: 85378

Does this work for you?

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

Upvotes: 2

mr_lewjam
mr_lewjam

Reputation: 1190

try $('#value1').text('newvalue1'); instead of $('#value1').html('newvalue1');

Upvotes: 0

Related Questions