JQuery UI Multiple Dialogs Not Working

Question

I have a page with two links that open two different modals, the "forgotten password" link opens the "forgotten password" modal and the "tell-a-friend" link opens the "tell-a-friend" modal.

Both modals contain forms that can be submitted.

The problem is if I open the first modal and submit it or close it, I cannot submit the second modal. I can open the second modal, but I cannot submit it.

Please advise what the problem could be!

Here below is the javascript code that resides in separate javascript file, which is then imported into the HTML file. It is not inline javascript, if that would matter.

[code]

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'
        });
    }
}

[/code]

marty · Accepted Answer · 2013-02-07 21:31:42Z

1

The ui-dialog widget will stay in the DOM as a hidden element even after the dialog is closed. So, in order to isolate your two dialog functionalities from each other I'd suggest that you call:

forgottenPasswordDiv.dialog("destroy")

in your "closeForgottenPassword" function and

tellAFriendDiv.dialog("destroy")

in your "closeTellAFriend" function.

This will return the dialog back to its pre-init state (which is not harmful at all because you reinit it in your "open" functions.)

answered Feb 7, 2013 at 21:31

marty

4,01724 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sinoea Over a year ago

Hi Marty, code function closeForgottenPassword() { forgottenPasswordDiv.dialog("destroy").remove(); var div = '<div id="forgotten-password"></div>'; $("#footer").append(div); } code When remove() is called the <div id="forgotten-password"> will be removed from the DOM, then I create a new one and append it to the footer div. The #forgotten-password and the #tell-a-friend divs are in the footer div in the beginning, so they must be put back so that a dialog can be opened. However, I am not happy calling remove() and adding the div back to the footer, there must be a cleaner solution.

Sinoea Over a year ago

Hi Marty, I forgot to mention that did try your suggested solution, but it still did not work, so I changed both of the close functions. Here is an example code function closeForgottenPassword() { forgottenPasswordDiv.dialog("destroy").remove(); var div = '<div id="forgotten-password"></div>'; $("#footer").append(div); } code . Pleas read my previous message.

Collectives™ on Stack Overflow

JQuery UI Multiple Dialogs Not Working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related