从jQuery移动弹出窗口提交表格

Question

我正在使用jQuery Mobile和asp.net mvc4编写用于iPad的Web应用程序。

我的观点之一中有一个形式：

@using (Html.BeginForm("UpdateClose", "WO", FormMethod.Post, new { id = "CloseForm" })) {
  <input type="hidden" name="idNumber" value="@Model.idNumber">              
  <a href="#popupCloseDialog" data-rel="popup" data-role="button" data-inline="true" data-position-to="window" data-transition="pop" style="width:96%; margin-top: 4px">Close</a>
}

＆lt;上面形式中的a href>在同一视图中调用弹出对话框，看起来像这样：

<div data-role="popup" id="popupCloseDialog" data-overlay-theme="a" data-theme="b" data-dismissible="false"
    style="max-width:416px;" class="ui-corner-all">
        <div data-role="header" data-theme="a" class="ui-corner-top" >       
            <h1 class="ui-title" style="width:80%; margin-left:40px">Confirm</h1>        
        </div> 
        <div data-role="content" data-theme="a" class="ui-corner-bottom ui-content">      
            <h3 class="ui-title" style="text-align:center; height:22px;">Are you sure you want to close Order # @Model.idNumber?</h3>
            <br />                                             
            <a id="popupCloseSubmit" data-role="button" data-inline="true" data-rel="back"
            data-mini="true" data-theme="b" style="width:175px;" type="button">OK</a>
            <a href="#" data-role="button" data-inline="true" data-rel="back" 
                data-mini="true" data-transition="flow" style="width:175px; margin-left:10px" data-theme="b" >Cancel</a>                 
        </div>                   
</div> 

请注意，此弹出窗口不在" Closeform"之外。

当单击弹出窗口中的按钮时，我有简单的jQuery提交" Closeform"。在这里是：

$(document).on('pageinit', function () {
 $("#popupCloseSubmit").on("tap", pwHandler);
   function pwHandler(event) {
     try {
       $("#CloseForm").submit();
     }
     catch (e) {
       alert(e.Message);
     }
   }
});

现在，这大部分时间都起作用。单击表单中的关闭按钮时，对话框将调用。一旦单击弹出窗口的" popclosesubmit"按钮，就会提交Cropserform，并将代码运行到" WO"控制器中的" UpdateClose"操作。但是，有时这个过程挂断了，站点只是悬挂在那里，什么也不做。我将事件记录放入我的控制器操作和数据库中，因此我可以确认当这种"挂断"行为发生时，代码永远不会前进到" UpdateClose"操作。

这种行为的不一致使我感到困惑。似乎没有押韵或原因。

有人有任何想法吗？我应该从jQuery移动弹出窗口提交表格吗？

请注意，我只是在iPad上测试它 - 因为那是我们唯一需要它运行的地方。预先感谢任何指示。

Answer 1

此答案的全部信用归@Omar，他建议解决方案。经过大量测试，我可以说这是我的答案。

表格提交将"挂断"时，这是因为该表格在关闭jQuery Mobile弹出窗口之前要提交。正如@Omar指出的那样，弹出弹出时的URL发生变化。

因此，我的解决方案是强迫弹出窗口在提交表单之前关闭。

这是代码：

$(document).on('pageinit', function () {
 var srclicked;
 $("#popupCloseSubmit").on("tap", srsubHandler);
   function srsubHandler(event) {
       srclicked = true;
   }
   $("#popupCloseDialog").on("popupafterclose", pcHandler);
   function pcHandler(event) {
       if (srclicked) {
           $("#CloseForm").submit();
           srclicked = false;
        }
   }
});

因此，弹出窗口，#popupclosedialog包含一个提交按钮（#popclosesubmit）和一个取消按钮。单击提交（#popupclosesubmit）按钮时，我将一个变量（SRCLICKED）标记为true。每次#popupclosedialog关闭时，" popupafterclose"事件都会发射。因此，当弹出窗口关闭时，我检查一下变量srclicked是否为真。如果是这样，我关闭表单（#closeform），然后将变量设置为false。

我希望这对别人有帮助。非常感谢@Omar在聊天中抽出宝贵的时间与我交谈。