Here's my scenario.
I call jqModal using its ajax functionality that displays a form in the modal dialog. The user fills out some information and submits the form which returns some html in response.
The resulting html is being displayed inside the jqModal div. The user then clicks Close to dismiss the modal dialog.
This all works correctly so far.
Instead, what I want to do is close the dialog on submit and update a div with the response from the server.
Calling code:
<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>
Calling page's markup. Clicking "Save this search" triggers the dialog.
<a href="#" class="jqModal">Save this search</a>
<span id="j开发者_如何学PythonqmWindowContainer" class="jqmWindow"></span>
Form that is displayed:
<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>
Right now, the entire jqmPopupForm div is being replaced by the results of the form submit.
How can I close the dialog and update a div on the page instead of making the user dismiss the dialog?
You can close the modal window by adding an onSubmit
attribute to the form with the value $('#jqmWindowContainer').jqmHide();
. That should allow for the submission of the form while closing the modal.
UPDATE:
In the ajaxOptions
portion of your ASP code, add the property onSuccess
and specify a function that closes the modal window.
<% using (Ajax.BeginForm("Save", "AssetSearch",
new AjaxOptions()
{ HttpMethod = "Post", InsertionMode = InsertionMode.Replace,
UpdateTargetId = "jqmPopupForm",
LoadingElementId = "loadingMessage",
OnComplete = "validateForm"
OnSuccess = "closeWindow"
}))
{%>
where closeWindow
is the name of the JavaScript function which will close the modal window, and
validateForm
is the name of the JavaScript function which will validate the form before submission.
References:
http://msdn.microsoft.com/en-us/library/dd460243.aspx
http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxoptions.aspx
精彩评论