cannot call methods on flipswitch prior to initialization

Question

I want to set the selected value of a jQuery Mobile flipswitch:

<select id="quote" data-role="flipswitch" data-theme="b">
    <option value="nee">Nee</option>
    <option value="ja">Ja</option>
</select>

When doing the following I get an error:

 $("#quote").val('nee').flipswitch('refresh');

"cannot call methods on flipswitch prior to initialization"

I have also tried:

$("#quote").val('nee').slider().flipswitch('refresh');
$("#quote").val('nee').flipswitch().flipswitch('refresh');

How can I get this right?

Answer 1

/**
* UI Behaviour,
* Toggle switches.
* @param {bool} isOn || isOff
* @access public
*/
function updateUiSwitches( el, isOn ) {

    el.find( 'input[type=checkbox]' ).each(function( index, el ) {

        $( el ).flipswitch().prop( 'checked', ( isOn )? true : false ).flipswitch( 'refresh' );

    });

}

// toggle switch on
updateUiSwitches( $( '#quote' ), true );

:) Sorry Boet; just bashed it out on notepad for you, it's not tested. . . but should do the trick ( or something at least in the desired direction ).

Answer 2

The HTML in question has either been programmatically injected. Or the HTML was hidden, for example, in a tab, so never initialized by jQuery Mobile.

Call this atleast once prior to refresh():

$("#quote").enhanceWithin();

You can enhance as large a code block as you like:

$("#huge-html-content").enhanceWithin();