jQM Template

by Dragan Gaić

HTML

<link rel="stylesheet" href="http://jeromeetienne.github.com/jquery-mobile-960/css/jquery-mobile-fluid960.css">
<script src="http://timeago.yarp.com/jquery.timeago.js"></script>
<script src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js"></script>
<!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">
                <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>
                     ...

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');
        });
    }
}