Модальные формы - AjaxStart и End - вызовы .load и .ajax () - PullRequest
Новая
       1

Модальные формы - AjaxStart и End - вызовы .load и .ajax ()

0 голосов
/ 09 августа 2011

Я работаю над проектом .NET MVC 3, где я загрузил все представления, основанные на form, в модальном диалоговом окне, используя jQuery.

Все мои представления загружаются с использованием ajax по всему проекту.

У меня есть функция jQuery, которую я вызываю для любого события щелчка по ссылке, которое выбирает данный URL-адрес (из вида на основе формы, такого как редактирование, добавление и т. Д.) И отображает его в модальном диалоговом окне следующим образом: 

function getFormInModal(url_location, modalWidth, modaltitle, tab) {
    var url = url_location;
    var dialogDiv = $('<div style="display: none;"></div>').appendTo('body');
    dialogDiv.load(url, function () {
        //Enable the client side validation
        var $form = $('form', dialogDiv);
        $.validator.unobtrusive.parse($form);
        var buttons = {
            "Submit": function () {
                //Create a validation summary container
                var valSummary = ModalForms.validationSummary();
                valSummary.setup($form);
                if ($form.valid()) {
                    var postUrl = $form.attr('action');
                    var formData = $form.serialize();
                    jQuery.ajax({
                        url: postUrl,
                        type: 'POST',
                        data: formData,
                        complete: function (data) {
                            dialogDiv.dialog('close');
                            refresh(tab);
                            $.jGrowl("Submitted Successfully.", { life: 2000 });
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            var data = jQuery.parseJSON(jqXHR.responseText);
                            if (data && data.errors) {
                                valSummary.addErrors(data.errors);
                            }
                        }
                    });
                }
            },
            Cancel: function () {
                dialogDiv.dialog('close');
                $("html,body").css("overflow", "auto");
            }
        };
        //Load up the dialog
        dialogDiv.dialog({
            autoOpen: true,
            modal: true,
            title: modaltitle,
            draggable: false,
            resizable: false,
            buttons: buttons,
            width: modalWidth,
            close: function () {
                $(this).remove();
            },
            open: function (event, ui) {
                $("html,body").css("overflow", "hidden");
            }
        });
    });
}

Моя проблема в функции success кнопки submit на модале.

Он делает 3 вещи: 1. Закрывает диалог модальной формы 2. Уведомляет пользователя, что POST был успешным 3. Обновляет содержимое в определенном DIV посредством вызова другой простой функции refresh(). 

function refresh(tabname) {
    if (tabname == "dashboard") {
        $("#dashboard-tab").load("/Sales/Home/Reports");
        $("#tabs").tabs("select", 0);
    }
    if (tabname == "leads") {
        $("#leads-tab").load("/Sales/Lead/Index");
        $("#tabs").tabs("select", 1);
    }
    if (tabname == "retail") {
        $("#retail-tab").load("/Sales/Retail/Index");
        $("#tabs").tabs("select", 2);
    }
    if (tabname == "corporate") {
        $("#corporate-tab").load("/Sales/Corporate/Index");
        $("#tabs").tabs("select", 3);
    }
}

Теперь отдельно я подключил некоторые события в DOM ready, которые обрабатывают мой статус вызова ajax, следующим образом: 

$("#loading").dialog({
    autoOpen: false,
    modal: true,
    width: '450px',
    title: 'Patience is a virtue!',
    resizable: false,
    draggable: false
});

$("#loading").ajaxStart(function () {
    $("#loading").dialog('open');
    $("html,body").css("overflow", "hidden");
});

$("#loading").ajaxSuccess(function () {
    $("#loading").dialog('close');
    $("html,body").css("overflow", "auto");
});

$("#loading").ajaxError(function (event, jqXHR, ajaxSettings, thrownError) {
    $("#loading").dialog('close');
    $.jGrowl(html(thrownError.toString()), { life: 2000 });
});

все отлично работает - - Я нажимаю на ссылку - Я вижу модальный диалог #loading - Он загружается и #loading закрывается, а dialogDiv открывается - Я нажимаю «Отправить», и #loading открывается поверх dialogDiv - Когда это будет сделано и близко, и я получаю уведомление jGrowl

Последний шаг, который заключается в загрузке контента, также происходит, однако, как только мой POST завершен, и сделан вызов .load() для обновления контента, модальный #loading больше не отображается.

В принципе, .ajaxStart() не стреляет. Я не знаю почему.

Сначала я написал функцию success для сообщения ajax, сделанного в событии нажатия кнопки отправки. Тогда я понял, что complete может быть лучше.

Даже сейчас, когда я вызываю refresh () и, следовательно, .load() после завершения единственного другого живого .ajax() вызова, .ajaxStart() не работает.

Может кто-нибудь, пожалуйста, помогите !!

1 Ответ

1 голос
/ 09 августа 2011

Единственное, что я вижу, это то, что текущий ajax-запрос все еще обрабатывается, когда вы вызываете функцию refresh, из-за которой ваш метод ajaxStart не запускается. Попробуйте отредактировать метод ready(), чтобы добавить метод beforeSend в настройки ajax. Я обнаружил, что ajaxStart всегда ведет себя странно, поэтому обычно beforeSend немного более надежен (imo). 

$(document).ready({
   $.ajaxSetup({
      beforeSend: function()
      {
         $('#loading').open();
         $('html,body').css('overflow', 'hidden');
      }
   });
   /* Rest of your initialization here */
});

Надеюсь, это поможет и будет работать для вас.

...