Refreshing and Auto Initialization of Form Elements
Advertisements
In this chapter we will study about refreshing form element and preventing auto-initialization of form elements.
Refreshing Form Elements
Refresh method is used to update the new state of form control by itself and updates the form control with JavaScript. Following code snippets are used for different form elements −
Checkboxes
$( "input[type = 'checkbox']" ).prop( "checked", true ).checkboxradio( "refresh" );
Radios
$( "input[type = 'radio']" ).prop( "checked", true ).checkboxradio( "refresh" );
Selects
var myselect = $( "#selectfoo" ); myselect[0].selectedIndex = 3; myselect.selectmenu( "refresh" );
Sliders
$( "input[type = 'range']" ).val( 60 ).slider( "refresh" );
Flip switches
var myswitch = $( "#selectbar" ); myswitch[ 0 ].selectedIndex = 1; myswitch.slider( "refresh" );
Preventing Auto-initialization of Form Elements
Include the attribute data-role = "none" to modify the selector which are used to prevent auto-initialization. Bound the data-role = "none" attribute with mobileinit event to load the first page along with subsequent pages.
<label for = "test"> <select id = "test" name = "test" data-role = "none"> <option value = "Mumbai">Mumbai</option> <option value = "Pune">Pune</option> <option value = "Belgaum">Belgaum</option> <option value = "Chennai">Chennai</option> <option value = "Bangalore">Bangalore</option> </select>
$( document ).bind( "mobileinit", function() { $.mobile.page.prototype.options.keepNative = "select, input.test, textarea.bar"; });
jquery_mobile_forms.htm
Advertisements