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!

score 1 · Accepted Answer · edited May 23 '17 at 10:25

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

Hi Gajotres, Thank you for the answer! However, it doesn't work in either the jsfiddle.com example or in my app. The first error I got was cannot read method of null..so I wrapped the each statement in an if formData statement but then I get this error: "cannot call methods on slider prior to initialization; attempted to call method 'refresh'" Any ideas on how to fix this? — PropSoft, May 05 '13 at 01:06
That is a problem when you do development at 3 in the morning. It will work now. — Gajotres, May 05 '13 at 07:36

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

1 Answers1