开发者

Update a div with results of a jqModal ajax call from MVC page

开发者 https://www.devze.com 2023-02-18 08:17 出处:网络
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 respons

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

0

精彩评论

暂无评论...
验证码 换一张
取 消