Question

我使用Razor Engine获得了一个用C＃编写的MVC项目。我通过jQuery调用一个模态，它通过AJAX将一个表单加载到我的控制器的POST字段，返回加载到调用DIV中的更新内容。

这非常有效......一次。尝试再次打开模式（编辑不同的行），表单就像重定向一样加载到浏览器中，而不是在模态对话框中显示它。

在我看来，我从一个链接调用我的模态（自定义HTML助手，仅为了可读性而添加了换行符）：

@Html.NoEncodeActionLink("<span class='glyphicon glyphicon-pencil'></span>", "Edit Phone", "Edit", "PhoneLinks", 
                         theseRouteValues: new { id = item.id }, 
                         theseHtmlAttributes: new { 
                             data_modal = "", 
                             data_toggle = "modal", 
                             data_dismiss = "modal", 
                             data_title = "Edit Phone", 
                             data_btnlabel = "Edit Phone", 
                             data_callingdiv = "replaceTargetPhone", 
                             data_whichform = "PhoneLinkModalForm", 
                             @class = "btn btn-primary btn-xs" 
                         }
                        )

链接上的点击会在我的jQuery中捕获并使用AJAX处理。

jQuery(function () {
    jQuery.ajaxSetup({ cache: false });

    // Initialize the modal DIV
    var $modalDiv = jQuery("<div class='modalContent'></div>")
    .appendTo('body')
    .dialog({
        modal: true,
        autoOpen: false,
        position: { my: 'center', at: 'center', collision: 'fit' },
        show: { effect: 'blind', duration: 300 },
        hide: { effect: 'explode', duration: 500 },
        close: function () { jQuery('div.modalContent').empty(); }
    });

    // Create a modal popup when a modal-generating link is clicked
    jQuery("a[data-modal]").on("click", function (e) {

        e.preventDefault();

        // Gather parameters from the link into variables for readability
        var sourceLink = jQuery(this); 
        var sourceHref = sourceLink.attr('href'); // Relative path to controller method
        var titleData = sourceLink.data('title'); // Title for the modal dialog
        var callingDiv = "#" + sourceLink.data('callingdiv'); // #replaceTarget divs ... where to apply refresh after AJAX returns
        var whichForm = "#" + sourceLink.data('whichform'); // ID of the form called by the link that will be submitted in the modal
        var btnProceed = sourceLink.data('btnlabel'); // Which function was called: Create/Edit/Delete (for button labelling)
        var btnCancel = "Cancel";       
        var theseButtons = {};

        // Submit Button
        theseButtons[btnProceed] = function () {
            // Send parameters to another function for processing
            // On success, the processForm() function closes the modal
            processForm(theModalContent, callingDiv, theModalContainer, sourceHref, whichForm, titleData);
        };

        // Cancel Button
        theseButtons[btnCancel] = function () {
            jQuery('div.modalContent').empty().dialog('close');
            return false;
        };

        // Add a few parameters to the modal (title, buttons, etc.) and load content
        $modalDiv.empty();
        $modalDiv
            .load(sourceHref)
            .dialog({
                title: titleData,
                buttons: theseButtons
            });

        $modalDiv.dialog('open');
    });

});

processForm（）函数处理对控制器的AJAX调用，它按预期工作。成功时，它会在“取消”按钮中使用相同的代码行关闭模式：

jQuery('div.modalContent').empty().dialog('close');

我可以第一次打开模态而没有问题。 First call to modal works perfectly.

我可以取消模态并根据需要重新打开它。

如果我在模式中提交表单，表单会正确处理，我的数据库会正确更新，并且内容会在目标DIV中正确重新加载。但是，如果我然后尝试打开后续模式（用于编辑另一个电话号码），则表单不会加载到模态中。它反而加载为新HTML文档的主体。 Second call to modal fails.

我试过以多种不同方式关闭模态：

.dialog('destroy')

或

.remove()

或

.dialog('destroy').remove()

我还尝试在＆＃34; a [数据模式] .on（＆＃39;点击＆＃39;）功能中初始化模式，而不是初始化文档就绪。

所有工作变体第一次起作用，然后在第一次提交后失败。

非常感谢任何建议！

更新：添加了processForm（）函数代码。

function processForm(thisModalContent, thisCallingDiv, thisModalContainer, thisMethod, thisForm, thisTitle) {

    // Capture the form fields
    var formPost = jQuery(thisForm);

    // Serialize the fields to an array
    // This step is necessary to handle phone number mask removal
    var values = formPost.serializeArray();

    // Some code here removes phone masking and 
    // puts the raw numbers back into the array

    // Convert the serialized array to a single string for POST
    var serializedPost = jQuery.param(values);

    // Send data to controller and handle response
    jQuery.ajax({
        url: thisMethod,
        type: 'POST',
        data: serializedPost,
        error: function (x, e) {
            if (x.status === 0) {
                alert('You are offline!!\n Please Check Your Network.');
            } else if (x.status === 404) {
                alert('Requested URL not found.');
            } else if (x.status === 500) {
                alert('Internal Server Error.\n DataSent: \n' + serializedPost + '\n Response Text: \n' + x.responseText);
            } else if (e === 'parsererror') {
                alert('Error.\nParsing JSON Request failed.\n' + x.responseJSON);
            } else if (e === 'timeout') {
                alert('Request Time out.');
            } else {
                alert('Unknown Error.\n' + x.responseText);
            }
        },
        success: function (result) {
            if (result.success) {
                //jQuery('div.modalContent').dialog('destroy').remove();  // Didn't Work
                //jQuery('div.modalContent').dialog('destroy');  // Didn't Work
                //jQuery('div.modalContent').remove();  // Didn't Work
                jQuery('div.modalContent').empty().dialog('close');
                jQuery(thisCallingDiv).load(result.url);
            } else {
                thisModalContent.html(result);
            }
        }
    });
return false;
}

此外，值得一提的是，虽然此示例中的代码是引用电话号码，但我在同一页面上有地址的DIV。地址编辑链接单击调用相同的jQuery模式。

如果我提交电话编辑，则后续从电话编辑链接调用模式会被破坏。

但我可以成功调用地址编辑模式...一次。然后打破后续调用。

刷新页面可修复两种链接类型（电话和地址）的模式。在提交之前，可以重复打开和取消这两种类型。然后那个被破坏了，但是另一个仍然有效，直到它被提交。

jQuery模式对话框首次打开工作，后续打开失败

0 个答案: