Flipswitch in jQueryMobile gives error of initialization

Question

I have a slider in the footer of my html.

<div data-role="footer" data-position="fixed"> 
    <div class="ui-grid-a">
        <div class="ui-block-a">
            <div class="ui-bar">
                <div data-role="fieldcontain">
                    <label for="flip_repair">Repair Mode:</label>
                    <select id="flip_repair" name="flip_repair" data-role="slider" onchange="flip_repair_onchange(this.value)">
                        <option value="off" selected>Off</option>
                        <option value="on">On</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="ui-block-b">
            <div class="ui-bar">&nbsp;</div>
        </div>
    </div>
</div>

Everytime I want to manipulate it via code, I get the following error:

Error: cannot call methods on flipswitch prior to initialization; attempted to call method 'refresh'

I have checked other posts since it looked a common problem. They suggested use document.pageinit instead of document.ready when using JQM. I applied that change to my html, but I still get the error:

$(document).on('pageinit', function() {
    $('#flip_repair').prop('checked', true)
    .flipswitch('refresh');
});

Answer 1

It looks like with initializing it means giving a default value at the beginning:

$("#flip_repair").prop("selectedIndex", 0); 
$("#flip_repair").slider("refresh");

Then, it works like a charm.