来自Jquery Mobile Pop-up的提交表单

Question

我正在使用Jquery和ASP.NET MVC4为ASP.NET编写一个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>
}

上面表单中的<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“按钮后，将提交CloseForm并将代码转到"WO”控制器中的"UpdateClose“操作。但是，有时这个过程会挂起，站点就挂在那里，什么也不做。我已经将事件日志记录放在我的Controller和我的数据库中，这样我就可以确认，当这种“挂起”行为发生时，代码永远不会前进到"UpdateClose“操作。

这种行为的不一致使我感到困惑。当它发生时，似乎没有韵律，也没有原因。

有人有什么想法吗？还有其他方法可以从jquery手机弹出中提交表单吗？

请注意，我只是在一个iPad上测试这个，因为这是我们需要它工作的唯一地方。提前谢谢你的指点。

Answer 1

这个答案完全归功于奥马尔，他提出了解决方案。经过多次测试，我可以说这是我的答案。

当表单提交将“挂断”时，这是因为表单试图在Jquery弹出框关闭之前提交。正如@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)和一个取消按钮。当单击submit (#popupCloseSubmit)按钮时，我将变量(srclicked)标记为true。每次#popupCloseDialog关闭时，“弹出后关闭”事件都会触发。因此，当弹出窗口关闭时，我会检查变量srclicked是否为true。如果是，我关闭表单(#CloseForm)并将变量设置为false。

我希望这能帮到别人。非常感谢奥马尔花时间和我聊天。