在 jquery mobile 中处理新/编辑进程的会话

Question

有一个名为 index.html 的 html 文件。这里我有一个用于列表视图（组）的页面。另一个（pg_add-group）用于新视图和编辑视图。 如果我从列表视图中点击添加按钮，则新表单正确打开。如果我从列表视图中选择任何产品，它会将详细信息正确上传到编辑视图。 它是通过从会话中获取日期来完成的。现在，如果我再次尝试添加产品，它会在新表单中包含旧会话数据。新表单应该包含空的详细信息。你能帮我这样做吗？

这是我的代码，

pg_add-group

<div id="pg_add-group" data-role="page">
        <form name="frm_add-group" id="frm_add-group"  action="" method="post">
        <div data-role="header" data-transition="fixed">
            <h1 id="add-group-header"></h1>
            <a href="" data-role="button"  data-icon="back" data-rel="back">Back</a>
            </div>
        <div data-role="main" class="ui-content" >
            <div id="add_sms-group_notification" class="center-wrapper-error" data-icon="right"></div>       
            <label for="group_name" class="ui-hidden-accessible"></label>
                <input type="text" name="group_name" id="group_name" placeholder="Enter Group Name" />
            <label for="group_desc" class="ui-hidden-accessible"></label>
                <textarea  name="group_desc" id="group_desc" placeholder="Enter Group Decription"></textarea>               
            <div class="containing-element">
            <label for="group_published">Published</label>
                <select name="group_published" id="group_published"  data-theme="b">
                <option value="1" >Yes</option>
                <option value="0" >No</option>
                </select>
                <input type="hidden" name="group_id" id="group_id" />
            </div>  
            <div class="containing-element">
            <button type="submit" name="submit" value="submit" data-theme="a" data-icon="check">Submit</button>                 
            <button type="reset" name="reset" value="reset" data-theme="a" data-icon="delete" >Reset</button>
        </div>  
        <div data-role="footer" data-position="fixed">
            <h1 id='add-book-footer'></h1>
        </div>
        </form>
    </div>

test.js

从他下面编码

group_id is comes from the list view's selected group id. 
session data ses_group contains the list of groups.

$('#pg_add-group').on('pageshow', function(event) {

    var group_list = $.parseJSON(sessionStorage.getItem("ses_group"));
    var group_id =  sessionStorage.group_id;
    $.each(group_list, function(ctr, obj) {
        if(group_id == obj.groupid){
            $('input[id=group_name]').val(obj.groupname);
            $('textarea[id=group_desc]').val(obj.groupdesc);
            $('input[id=group_id]').val(obj.groupid);
            $("#group_published").val('0').slider('refresh');
        }
    });

    $( ".input[id=group_name]" ).textinput( "refresh" );
    $( ".textarea[id=group_desc]" ).textinput( "refresh" );

});

Answer 1

工作示例：http://jsfiddle.net/Gajotres/2AVWQ/

用法：

查看提供的代码，使用的每个元素都有一个名为 data-default-value 的自定义属性，用于确定哪个元素是默认值。基本上使用提供的代码来重置任何形式。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <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.4.2/jquery.mobile-1.4.2.min.css" /> 
        <!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="#second" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <input type="button" id="clr-form-btn" value="Clear form"/>
                <label for="basic">Text Input:</label>
                <input type="text" name="name" id="basic" value="Some value"/>

                <label for="flip-1">Flip switch:</label>
                <select name="flip-1" id="flip-1" data-role="slider" data-default-value="off">
                    <option value="off">Off</option>
                    <option value="on">On</option>
                </select>

                <fieldset data-role="controlgroup">
                    <legend>Choose a pet:</legend>
                    <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1"/>
                    <label for="radio-choice-1">Cat</label>

                    <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2"  checked="checked" data-default-value=""/>
                    <label for="radio-choice-2">Dog</label>

                    <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3"  />
                    <label for="radio-choice-3">Hamster</label>

                    <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4"  />
                    <label for="radio-choice-4">Lizard</label>
                </fieldset>

                <label for="select-choice-0" class="select">Shipping method:</label>
                <select name="select-choice-0" id="select-choice-0" data-default-value="standard">
                    <option value="standard">Standard: 7 day</option>
                    <option value="rush">Rush: 3 days</option>
                    <option value="express">Express: next day</option>
                    <option value="overnight">Overnight</option>
                </select> 
                <textarea>
                    asd
                    asd
                    asd
                    as
                    das
                    d
                    asdassd
                </textarea>
            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div> 
    </body>
</html>   

Javascript：

$(document).on('pagebeforeshow', '#index', function(){ 
    cleanForm();          
});

function cleanForm() {
    var page = $.mobile.activePage;
    // Reset input elements
    page.find('.ui-content *').filter("[type='text'],textarea").each(function(){
        $(this).val('');
    });    

    // Reset drop down elements
    page.find('.ui-content *').filter(".ui-select").each(function(){
        var select = $(this).find('select');        
        var defaultValue = select.attr('data-default-value');
        select.val(defaultValue);
        select.selectmenu('refresh', true);
    });    

    // Reset flip switch elements
    page.find('.ui-content *').filter('[data-role="slider"]').each(function(){
        var flipSwitch = $(this);
        var defaultValue = flipSwitch.attr('data-default-value');
        flipSwitch.val(defaultValue);
        flipSwitch.slider('refresh');
    });   

    // Reset radio elements
    page.find('.ui-content *').filter('fieldset:has([type="radio"])').each(function(){
        var radio = $(this);
        var checkedRadio = radio.find(':checked').prop("checked",false).checkboxradio("refresh");
        var defaultRadio = radio.find('[data-default-value]').prop("checked",true).checkboxradio("refresh");
    }); 
}