Question

这是我的情景。

我使用其ajax功能调用jqModal，该功能在模式对话框中显示一个表单。用户填写一些信息并提交表单，该表单将返回一些html作为回应。

生成的html显示在jqModal div中。然后，用户单击“关闭”以关闭模式对话框。

到目前为止这一切都正常。

相反，我要做的是关闭提交对话框并使用服务器的响应更新div。

致电代码：

<script type="text/javascript">

    $(document).ready(function () {

        $('#jqmWindowContainer').jqm({
            modal: true,
            ajax: '.... url to display my form ...',
            onHide: myAddClose,
            ajaxText: 'Loading',
            toTop: true,
        });

        function myAddClose(hash) {
            hash.w.fadeOut('300', function () { hash.o.remove(); });
        }

    }); 

</script>

调用页面标记。单击“保存此搜索”将触发对话框。

    <a href="#" class="jqModal">Save this search</a>  
    <span id="jqmWindowContainer" class="jqmWindow"></span>

显示的表单：

   <div class="jqmPopupForm" id="jqmPopupForm">  
        <div id="loadingMessage" style="display: none;">
            Saving...
        </div>

        <% using (Ajax.BeginForm("Save", "AssetSearch", 
             new AjaxOptions() 
                 { HttpMethod = "Post", InsertionMode = InsertionMode.Replace,
                   UpdateTargetId = "jqmPopupForm", 
                   LoadingElementId = "loadingMessage"
                 }))
            {%>

            .... some html input elements go here ...

                <input type="submit" value="Save Search" />

                <a class="jqmClose" href="#">Cancel</a>                      

        <%
            }%>
    </div>

现在，整个jqmPopupForm div正在被表单提交的结果所取代。

如何关闭对话框并更新页面上的div而不是让用户关闭对话框？

Answer 1

您可以通过向值onSubmit的表单添加$('#jqmWindowContainer').jqmHide();属性来关闭模式窗口。这应该允许在关闭模式时提交表单。

更新：

在ASP代码的ajaxOptions部分中，添加属性onSuccess并指定一个关闭模态窗口的函数。

    <% using (Ajax.BeginForm("Save", "AssetSearch", 
         new AjaxOptions() 
             { HttpMethod = "Post", InsertionMode = InsertionMode.Replace,
               UpdateTargetId = "jqmPopupForm", 
               LoadingElementId = "loadingMessage",
               OnComplete = "validateForm"
               OnSuccess = "closeWindow"
             }))
        {%>

其中closeWindow是将关闭模态窗口的JavaScript函数的名称，和 validateForm是JavaScript函数的名称，它将在提交之前验证表单。

参考文献：
http://msdn.microsoft.com/en-us/library/dd460243.aspx
http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.aspx

使用MVC页面中的jqModal ajax调用结果更新div

1 个答案: