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?

With jQM you dont use document.ready(). Use pagecreate or one of the pagecontainer widget's events instead. Here is a demo: http://jsfiddle.net/ezanker/9st8ytco/1/ — ezanker, May 08 '15 at 18:52
My flipswitches are in a jqm popup. Could this cause a problem? — vespino, May 08 '15 at 18:55
Should make no difference: http://jsfiddle.net/9st8ytco/2/ Can you make the fiddle reproduce the issue? — ezanker, May 08 '15 at 21:29
Maybe I'm not applying JQM the right way? http://apps.opolo.nl/geloofshelden/index.html — vespino, May 09 '15 at 09:53

Jody Jacobus Geers · Answer 1 · 2019-06-05T06:42:16.120

/**
* 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 ).

score 0 · Answer 2 · answered Oct 30 '20 at 04:33

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

cannot call methods on flipswitch prior to initialization

2 Answers2