0

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

两种模式都包含可以提交的表单。

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

请告知可能是什么问题！

下面是驻留在单独的 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'
        });
    }
}

[/代码]

4

1 回答 1

1

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

forgottenPasswordDiv.dialog("destroy")

在您的“closeForgottenPassword”功能和

tellAFriendDiv.dialog("destroy")

在您的“closeTellAFriend”函数中。

这将使对话框返​​回到其预初始化状态（这根本没有害处，因为您在“打开”函数中重新初始化它。）

于 2013-02-07T21:31:42.937 回答