jQuery Mobile: Programatically opening a Dialog right after closing another

Question

I'm currently developing a website that uses jQuery and jQuery Mobile. It has a Login Dialog which contains a Login button and a Register button.

<a href="" onClick="$('#LoginDialog').dialog('close'); $.mobile.changePage('#RegisterDialog', {role:'dialog', transition:'pop'});" data-role="button" data-icon="check" data-inline="true">Register</a>

This is the code for the Register button. I'm closing the LoginDialog and opening the RegisterDialog right after inside the "onClick", but what it actually does is close the LoginDialog, then show the RegisterDialog for a quick moment and send me back to the LoginDialog. It does work if I add:

setTimeout(function() {$.mobile.changePage('#RegisterDialog', {role:'dialog', transition:'pop'});}, 100)

Is there any way to fix this problem without this short delay? I would appreciate any useful answers very much, since I have been trying to find a solution for this problem for quite some time and I can't think of a way to fix it apart from putting a delay between the close and open functions...

EDIT: The reason why I want to close the Login Dialog before opening the Register Dialog is simply because I want the user to end up on the main page when he or she closes the Register Dialog. So opening a second dialog within the Login Dialog (which I have also tried to do) doesn't solve my problem...

EDIT: I found a solution to my problem. I just removed the close button from the dialog and added a cancel button at the bottom which just simply does

$.mobile.changePage('#')

That was really all I needed... Sorry for my noobish question :)

Answer 1

You can chain dialogs in jQM. And since you do nothing more in your onClick handlers than just changePage why not just do it all declaratively.

<div data-role="page" data-theme="a" id="home">
    <div data-role="header" data-theme="a" align="center">
        <h1>Home</h1>
    </div>
    <div data-role="content">
        <p>You need to log in first</p>
        <a href="#LoginDialog" data-rel="dialog" data-transition="pop" 
           data-role="button" data-icon="check" data-inline="true">Login in</a>
    </div>
</div>

<div data-role="page" data-theme="d" id="LoginDialog">
    <div data-role="header" data-theme="a" align="center">
        <h1>Login</h1>
    </div>
    <div data-role="content">
        <p>Provide your login information</p>
        <a href="#RegisterDialog" data-rel="dialog" data-transition="pop" 
           data-role="button" data-icon="check" data-inline="true">Register</a>
    </div>
</div>

<div data-role="page" data-theme="e" id="RegisterDialog">
    <div data-role="header" data-theme="e" align="center">
        <h1>Register</h1>
    </div>
    <div data-role="content">
        <p>Provide your registration information</p>
        <a href="#LoginDialog" data-rel="dialog" data-transition="pop" 
           data-role="button" data-icon="check" data-inline="true">Create an account and retutn to Login</a>
    </div>
</div>

Here is jsFiddle