load dynamic values in form elements in jquerymobile

Question

I have one page called index.html.I need to load some values at the time of showing page via jquery mobileevent .

Text and text area values added well.But the filpbox is not updating.Can anyone please to solve this ?

inxedx.html filp box coding

<label for="group_name" class="ui-hidden-accessible"></label>
                <input type="text" name="group_name" id="group_name" placeholder="Enter Group Name" />
            <label for="group_desc" class="ui-hidden-accessible"></label>
                <textarea  name="group_desc" id="group_desc" placeholder="Enter Group Decription"></textarea>
<label for="group_published">Published</label>
                <select name="group_published" id="group_published" data-role="slider" data-theme="b">
                <option value="1" >Yes</option>
                <option value="0" >No</option>
                </select>

test.js

$('#pg_add-group').on('pageshow', function(event) {


            $('input[id=group_name]').val('hello');
            $('textarea[id=group_desc]').val('hello desc');
            $('select[id=group_published]').selected = false;

    $( ".input[id=group_name]" ).textinput( "refresh" );
    $( ".textarea[id=group_desc]" ).textinput( "refresh" );
});

Answer 1

You forgot to enhance look of select box, it is done like this:

$('select[id=group_published]').selectmenu('refresh', true);

Read more about it here.

Update:

I didn't look carefully so I didn't so your question was about flipswitch slider.

Working example: http://jsfiddle.net/Gajotres/vds2U/75/

HTML:

<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider" data-default-value="off">
    <option value="off" defaultSelected>Off</option>
    <option value="on">On</option>
</select>

JavaScript:

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#reset', function(){ 
        $("#flip-1").val('off').slider('refresh');
    });
});