Question

My code used to work, but I recently updated jQuery UI to 1.8 and jQuery to 1.4 because some things weren’t working. Once I did that, those things started working, however, now I notice this one dialog is positioning itself top-center, instead of middle-center.

Let me explain the code a bit first. The code queries an Ajax request every x minutes to see the last time the session was hit. If it’s been 10 minutes since they last hit their session, a jQuery UI dialog div appears, with a warning that their session is about to expire, and there is a button that lets you re-hit your session via a separate in-line Ajax GET request without reloading the whole page.

Here’s the actual trouble. After 15 minutes or more, it’s supposed to close the warning dialog (it checks if it’s already open, which in this situation it ‘likely is’) and then creates a new dialog with an in-line login form that lets you re validate your log-in without reloading the page (and losing any unsaved, half-way filled out forms).

Here is the function that is supposed to close the warning, create the re-login div:

function renderReLogin() {
    if ($("#logOutWarning").dialog("isOpen")) {
        $("#logOutWarning").dialog("close"); // Close warning dialog as session has already expired
    }

    if ($("#logOutReLogin").dialog("isOpen") != true)
    {
        $('#noticeContainers').html('<div id="logOutReLogin" title="You\'ve been logged out!"><div id="logOutReLoginText"></div></div>');
    }

    $('#logOutReLoginText').html("This session has expired. In order to protect the integrity of you and your clients, we must limit sessions. To resume this session (and not lose any unsaved work) you must revalidate your credentials by logging in below.<br />" +
        '<br /><div style="color:red;text-align:center;" id="loginFeedback"></div>'+
        '<form id="reloginForm">'+
        '<table width="40%" align="center"><tr><td>E-mail:</td>'+
        '<td><input id="username" type="edit"></td></tr>'+
        '<tr><td>Password</td>'+
        '<td><input id="password" type="password"></td></tr>'+
        '</table></form>'
    );

    $('#logOutReLogin').dialog(
        {
            width: '50%',
            modal: true,
             show: 'scale',
            hide: 'scale',
            draggable: false,
            resizable: false,
            position: 'center',
            buttons: {
                "Re-Login": function() { retryLogin(); },
            }
        }
    );
}

Now like I said above, the warning opens fine, and then closes fine. But the re-login dialog snaps to the very top-center of the view-port, rather than the middle-center.

When I manually call $(“#logOutReLogin”).dialog(“option”, “position”, “center” ); via Firebug in Firefox after it’s already opened, it does go to where it should be. It just seems to be the open behavior within the function above.

Answer 1

After trial and error I believe I found the cause why it was not working. It seems that the hide animation on the warning dialog was conflicting with the show animation of the re-login dialog.

I moved around a lot of stuff and noticed the most desirable outcome after commenting out the animations settings, so I’m assuming that was it — but it could have been a combination of things I changed while experimenting.

I am not sure if this is a known no-no to have things set up the way I did/do. But I suppose having animations for this isn’t really needed as the likely reason they popup is the user is not looking at the tab.