Question

我有两个风格/最佳练习题和一个“如何防止这种情况发生”的问题。

我有一个移动网站

 <div data-role="page" id="A">
     stuff       
 </div>

 <div data-role="page" id="B">
     stuff       
 </div>

 <div data-role="page" id="C">
        <div data-role="footer" data-position="fixed">
            <div id="bottombuttondiv" data-role="navbar">
               <ul>
                  <li><a href="#pDialog">Show Dialog</a></li>
                  <li><a id="settings" href="javascript:showSettings();" >Settings</a></li>
               </ul>
            </div>
        </div>

        <div data-history="false" data-role="popup" id="pDialog" >
           <div role="main" class="ui-corner-bottom ui-content">
              <p>So what do you want to do?</p>
              <a href="javascript:doThis();" data-role="button" >Do This</a>
              <a href="javascript:doThat();" data-role="button" >Do That</a>
           </div>
        </div>
 </div>

 <div data-role="page" id="D">
     <form>
        <button type="submit" onclick="save(this.form)" value="Save" >Save</button>
     </form>
 <div>


 function doThat(){
     $.mobile.changePage( "#D", { transition: "slideup"} ); 
 }


 function save(frm){
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            url:    "url1",
            data: "JSON data",
            success: function(msg) {
                        $.ajax({
                                type: "POST",
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                url:    "url2",
                                data: "diff JSON data",
                                success: function(msg) {

                                },
                                error: function(msg) {
                                    alert("Oops");
                                }
                         });
             },
            error: function(msg) {
                alert("Oops");
            }
          });
 }

这是我第一次尝试使用jquery mobile。

我在A和B div中有onclick =“someFuction（）”的按钮。

someFunction（）从div中的小部件获取输入，如果某些内容不好则显示警报，如果一切正常，则通过调用显示下一页：

$.mobile.changePage( "#X", { transition: "slideup"} );

第一个最佳实践/风格问题：这是使jquery通过您的页面导航的合理方式吗？（具体来说，是否会破坏某种内部jquery规则，可能导致我将在稍后描述的第二个问题？）

在我显示div C之前这很好用。如果用户点击Show Dialog然后点击对话框上的Do That那么函数doThat（）显示包含表格的div D.

用户输入表单数据并点击“保存”按钮。该按钮执行save（）函数，该函数进行2次ajax调用。

第2次ajax调用是从第1次的成功功能完成的。

尽管很复杂，但它运行正常 - 或者至少我从第二次Ajax调用中得到了结果。

第二个最佳实践/风格问题：除了看起来很奇怪之外，还有一些原因，我不想在另一个ajax调用中进行ajax调用吗？

最大的问题是，在第二次ajax调用返回后，为什么div D不会留在屏幕上？而不是保持（即使我没有回击），div D消失了，div A重新显示。有谁能解释为什么？

最重要 - 任何人都可以建议如何预防吗？我希望div D保持在屏幕上直到用户点击Back然后我想要div C显示。

更准确地说，我想用第二个ajax调用返回的数据填充div C并重新显示div C.

jquery mobile显示错误的div

0 个答案: