Question

我有一个带有两个链接的页面打开两个不同的模态，“忘记密码”链接打开“忘记密码”模式，“告诉朋友”链接打开“告诉朋友”模式。

两个模态都包含可以提交的表格。

问题是如果我打开第一个模态并提交或关闭它，我就无法提交第二个模态。我可以打开第二个模态，但我不能提交它。

请告知问题所在！

下面是驻留在单独的javascript文件中的javascript代码，然后将其导入HTML文件。它不是内联javascript，如果这很重要。

[代码]

var forgottenPasswordDiv;
var tellAFriendDiv;

function clearErrorMessages() {
    $('#errorMessage').text("");        
}

function openForgottenPassword() {
    forgottenPasswordDiv = $('#forgotten-password');
    $('#forgotten-password').load("/Templates/include/new/ajax/modal/forgottenPassword.jsp")
    .dialog(
        {
            autoOpen:false,
            modal:true, 
            position:'left+35% top+20%', 
            width:'330', 
            height:'auto'
        }
    );
    $('#forgotten-password').dialog('open');
}

function closeForgottenPassword() {
    forgottenPasswordDiv.dialog("close");
}

function submitForgottenPassword() {
    clearErrorMessages();
    var email = $('#email').val();
    if (email == null || email == '') {
        $('#errorMessage').text("Please enter your user name or email");
    } else {
        clearErrorMessages();
        /* Ajax Post */
        var formData = $("#forgottenPasswordForm").serialize();
        $.ajax({
            type: "GET",
            url: "/Templates/include/new/ajax/forgottenPassword.jsp", 
            data: formData,
            success: function(data) {
                if (data.error != null) {
                    $("#errorMessage").text(data.error);
                } else {                            
                    $('#forgottenPasswordForm , .info').fadeOut(1000);
                    $("#successMessage").text(data.success);        
                    $("div").removeClass('display-none');
                }
            },
            dataType: 'json'
        });
    }               
}

function openTellAFriend(gunId) {
    tellAFriendDiv = $('#tell-a-friend');
    $('#tell-a-friend').load("/Templates/include/new/ajax/modal/tellAFriend.jsp?id=" + gunId)
    .dialog(
        {
            autoOpen:false,         
            modal:true, 
            position:'center top+10%', 
            width:'330', 
            height:'auto'
        }
    );
    $('#tell-a-friend').dialog('open');
}


function closeTellAFriend() {
    tellAFriendDiv.dialog("close");
}

function submitTellAFriend() {
    clearErrorMessages();
    var yourname = $('#yourname').val();
    var errorMessage = "";
    if (yourname == null || yourname == '') {
        errorMessage += "Please enter your name<br />";                 
    } 

    if (errorMessage != '') { 
        $('#errorMessage').html(errorMessage);
    } else {
        clearErrorMessages();
        /* Ajax Post */
        var formData = $("#tellAFriendForm").serialize();
        $.ajax({
            type: "GET",
            url: "/Templates/include/new/ajax/tellAFriend.jsp", 
            data: formData,
            success: function(data) {
                if (data.error != null) {
                    $("#errorMessage").text(data.error);
                } else {
                    $("#tellAFriendForm").fadeOut(1000);                        
                    $("#successMessage").text(data.success);
                    $("div").removeClass('display-none');
                }
            },
            dataType: 'json'
        });
    }
}

[/代码]

Answer 1

即使关闭对话框，ui-dialog小部件仍将作为隐藏元素保留在DOM中。所以，为了将你的两个对话功能相互隔离，我建议你打电话：

forgottenPasswordDiv.dialog("destroy")

在你的“closeForgottenPassword”函数和

中

tellAFriendDiv.dialog("destroy")

在你的“closeTellAFriend”函数中。

这会使对话框返回到pre-init状态（这完全没有害处，因为你在“open”函数中重新启动它。）

JQuery UI多个对话框不起作用

1 个答案: