Обновите div с результатами ajax-вызова jqModal со страницы MVC - PullRequest
Новая
       2

Обновите div с результатами ajax-вызова jqModal со страницы MVC

1 голос
/ 23 марта 2011

Вот мой сценарий.

Я вызываю jqModal, используя его функциональность ajax, которая отображает форму в модальном диалоге. Пользователь заполняет некоторую информацию и отправляет форму, которая возвращает html в ответ.

Полученный html отображается внутри элемента jqModal. Затем пользователь нажимает кнопку Закрыть, чтобы закрыть модальное диалоговое окно.

Пока все работает правильно.

Вместо этого я хочу закрыть диалоговое окно отправки и обновить 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 на странице, вместо того, чтобы пользователь закрывал диалог?

1 Ответ

2 голосов
/ 23 марта 2011

Вы можете закрыть модальное окно, добавив атрибут onSubmit в форму со значением $('#jqmWindowContainer').jqmHide();.Это должно позволить отправлять форму при закрытии модального.

ОБНОВЛЕНИЕ:

В части ajaxOptions вашего кода ASP добавьте свойство 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

...