How do I set an array of jQuery mobile flip toggle switches?

Question

I am working with jQuery mobile and have a set of 8 select flip switches with on and off values. What I need to do is set the value for each switch in localStorage when changed by the user. In turn, I also need to get the values stored in localStorage and set each switch accordingly when the page loads. Here is what I have so far. It's far from complete!

$(document).bind('pageinit', function() {
    function setCats(){
        var cats = $('#categories select');
        var dealCats = localStorage.getItem("Deal Categories");
    }

    function changeCats (){
        var cats = $('#categories select');
        for (var i = 0; i < 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 anyone help on this? Thanks in advance!

Answer 1

Here's a working example: http://jsfiddle.net/Gajotres/Dxqr2/

First, I have made a slight change to your request. I didn't want to bother with 8 different storage's, no point in create a storage for every single element. It is much better to create only one and store everything in it.To made it possible I have wrapped your form elements inside a form tag. No we are not going to submit anything, it is only needed so we can easily parse its content. This code will work no matter how much 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 you want to know how method slider('refresh') work take a look at my other answer: jQuery Mobile: Markup Enhancement of dynamically added content