javascript - How do I set an array of jQuery mobile flip toggle switches? -
i working jquery mobile , have set of 8 select flip switches on , off values. need set value each switch in localstorage when changed user. in turn, need values stored in localstorage , set each switch accordingly when page loads. here have far. it's far complete!
$(document).bind('pageinit', function() { function setcats(){ var cats = $('#categories select'); var dealcats = localstorage.getitem("deal categories"); } function changecats (){ var cats = $('#categories select'); (var = 0; < cats.length; i++) { var obj = cats[i]; } $('#categories select').on('change', function(){ localstorage.setitem('deal categories', json.stringify(obj.id)); }); } $('#categories').on('pagebeforeshow', function(){ setcats(); }); $('#categories').on('pageshow', function(){ changecats(); }); }); <div data-role="page" id="categories"> <div data-role="header" data-position="fixed"> <a data-rel="back" data-transition="slide" data-mini="true" data-inline="true">back</a> <h1>categories</h1> </div><!-- header --> <div data-role="content"> <ul data-role="listview"> <li> <div data-role="fieldcontain"> <label for="food">food & drink</label> <select name="food" id="food" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> <li> <div data-role="fieldcontain"> <label for="activity">activity</label> <select name="activity" id="activity" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> <li> <div data-role="fieldcontain"> <label for="spa">spa & salon</label> <select name="spa" id="spa" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> <li> <div data-role="fieldcontain"> <label for="fitness">fitness & health</label> <select name="fitness" id="fitness" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> <li> <div data-role="fieldcontain"> <label for="homeauto">home & auto</label> <select name="homeauto" id="homeauto" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> <li> <div data-role="fieldcontain"> <label for="medical">medical/dental</label> <select name="medical" id="medical" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> <li> <div data-role="fieldcontain"> <label for="sports">sports/leisure</label> <select name="sports" id="sports" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> <li> <div data-role="fieldcontain"> <label for="products">products</label> <select name="products" id="products" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> </ul> </div><!-- content --> </div><!-- categories --> can on this? in advance!
here's working example: http://jsfiddle.net/gajotres/dxqr2/
first, have made slight change request. didn't want bother 8 different storage's, no point in create storage every single element. better create 1 , store in it.to made possible have wrapped form elements inside form tag. no not going submit anything, needed can parse content. code work no matter how select elements exist.
html :
<!doctype html> <html> <head> <title>jqm complex demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densitydpi=device-dpi"/> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> </head> <body> <div data-role="page" id="categories"> <div data-role="header" data-position="fixed"> <a data-rel="back" data-transition="slide" data-mini="true" data-inline="true">back</a> <h1>categories</h1> </div><!-- header --> <div data-role="content"> <form id="test-form" data-ajax="false"> <ul data-role="listview"> <li> <div data-role="fieldcontain"> <label for="food">food & drink</label> <select name="food" id="food" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> <li> <div data-role="fieldcontain"> <label for="activity">activity</label> <select name="activity" id="activity" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> <li> <div data-role="fieldcontain"> <label for="spa">spa & salon</label> <select name="spa" id="spa" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> <li> <div data-role="fieldcontain"> <label for="fitness">fitness & health</label> <select name="fitness" id="fitness" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> <li> <div data-role="fieldcontain"> <label for="homeauto">home & auto</label> <select name="homeauto" id="homeauto" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> <li> <div data-role="fieldcontain"> <label for="medical">medical/dental</label> <select name="medical" id="medical" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> <li> <div data-role="fieldcontain"> <label for="sports">sports/leisure</label> <select name="sports" id="sports" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> <li> <div data-role="fieldcontain"> <label for="products">products</label> <select name="products" id="products" data-role="slider"> <option value="off">off</option> <option value="on">on</option> </select> </div> </li> </ul> </form> </div><!-- content --> </div><!-- categories --> </body> </html> javascript :
$(document).on('pagebeforecreate', '#categories', function(){ initializeform(); $(document).off('change', 'select').on('change', 'select', function(){ var fields = $(":input").serializearray(); storeformdata(json.stringify(fields)); }); }); function storeformdata(data) { localstorage.setitem('formdata', data); } function initializeform() { var formdata = localstorage.getitem('formdata'); if(formdata != null) { jquery.each(jquery.parsejson(formdata), function(i, field){ var select = $('select[name="' + field.name + '"]'); select.find('[value="' + field.value + '"]').attr('selected','selected'); }); } } one last thing if want know how method slider('refresh') work take @ other answer: jquery mobile: markup enhancement of dynamically added content
Comments
Post a Comment