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="jqmWindowContainer" 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?