Question

我尝试使用运行局部变量的jquery移动多页表单，但我有两个问题。

a）第二个值在保存后未更新，但在编辑页面中重新加载

b）当我在视图和编辑之间连续切换（4次）时，编辑按钮调用编辑页面（请参阅URL），但页面未显示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
    <div id="view" data-role="page">
        <div id="view-head" data-role="header">
            <h1>View</h1>
            <a href="#edit" class="ui-btn-right" data-transition="none">Edit</a>
        </div>
        <div id="content" data-role="content">
            <h2 id="unit-title">x</h2>
            <p id="unit-summary">y</p>
        </div>
    </div>
    <div id="edit" data-role="page">
        <div id="edit-head" data-role="header">
            <a href="#view" class="ui-btn-left" data-transition="none">View</a>
            <h1>Edit</h1>
        </div>
        <form>
            <label for="edit-title" class="ui-hidden-accessible">Unit title</label>
            <input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
            <label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
            <textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
            <input type="button" name="edit-submit" id="edit-submit" value="Save">
        </form>
    </div>
    <script type="text/javascript">
        var unit =  { "id":"1" , "title" : "Hello", "summary" : "World" };

        $(document).on("pagebeforeshow","#view",function() {
            document.getElementById('unit-title').innerHTML = unit.title;
            document.getElementById('unit-summary').innerHTML = unit.summary;
        });

        $(document).on("pagebeforeshow","#edit",function() {
            $(document).on('click', '#edit-submit', function() {
                unit.title = document.getElementById('edit-title').value;
                unit.summary = document.getElementById('edit-summary').innerHTML;
                $.mobile.navigate("#view", {});
            });
            document.getElementById('edit-title').value = unit.title;
            document.getElementById('edit-summary').innerHTML = unit.summary;
        });
    </script>
</body>
</html>

Answer 1

这是完整的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

    <div id="view" data-role="page">
        <div id="view-head" data-role="header">
            <h1>View</h1>
            <a href="#edit" class="ui-btn-right" data-transition="none">Edit</a>
        </div>
        <div id="view-content" data-role="content">
            <h2 id="unit-title">x</h2>
            <p id="unit-summary">y</p>
        </div>
    </div>

    <div id="edit" data-role="page">
        <div id="edit-head" data-role="header">
            <a href="#view" class="ui-btn-left" data-transition="none">View</a>
            <h1>Edit</h1>
        </div>
        <form>
            <label for="edit-title" class="ui-hidden-accessible">Unit title</label>
            <input type="text" name="edit-title" id="edit-title" data-clear-btn="true" placeholder="Title ...">
            <label for="edit-summary" class="ui-hidden-accessible">Unit summary</label>
            <textarea name="edit-summary" id="edit-summary" placeholder="Summary ..."></textarea>
            <input type="button" name="edit-submit" id="edit-submit" value="Save">
        </form>
    </div>

    <script type="text/javascript">
        var unit =  { "title" : "Hello", "summary" : "World" };

        $(document).on("pagebeforeshow","#view",function() {
            document.getElementById('unit-title').innerHTML = unit.title;
            document.getElementById('unit-summary').innerHTML = unit.summary;
        });

        $(document).on("pagebeforeshow","#edit",function() {
            document.getElementById('edit-title').value = unit.title;
            document.getElementById('edit-summary').innerHTML = unit.summary;
        });

        $(document).on('click', '#edit-submit', function() {
            unit.title = document.getElementById('edit-title').value;
            unit.summary = document.getElementById('edit-summary').value;
            $.mobile.navigate("#view", {});
        });
    </script>
</body>
</html>

JQuery Mobile - 具有本地值的多页表单

1 个答案: