jQuery Mobile: программно открывать диалог сразу после закрытия другого

Question

В настоящее время я занимаюсь разработкой веб-сайта, который использует jQuery и jQuery Mobile. Он имеет диалог входа в систему, который содержит кнопку входа и кнопку регистрации.

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

Это код для кнопки регистрации. Я закрываю Login Dialog и открываю RegisterDialog сразу после "onClick", но на самом деле он закрывает LoginDialog, затем на короткое время показывает RegisterDialog и отправляет меня обратно в LoginDialog. Это работает, если я добавлю:

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

Есть ли способ решить эту проблему без этой короткой задержки? Я был бы очень признателен за любые полезные ответы, так как я довольно долго пытался найти решение этой проблемы, и я не могу придумать, как это исправить, кроме задержки между функциями закрытия и открытия...,

РЕДАКТИРОВАТЬ: причина, по которой я хочу закрыть диалоговое окно входа в систему перед открытием диалогового окна регистрации, просто потому, что я хочу, чтобы пользователь оказался на главной странице, когда он или она закрывает диалоговое окно регистрации. Поэтому открытие второго диалога в диалоге входа (что я тоже пытался сделать) не решает мою проблему...

РЕДАКТИРОВАТЬ: я нашел решение своей проблемы. Я просто удалил кнопку закрытия из диалогового окна и добавил кнопку отмены внизу, которая просто делает

$.mobile.changePage('#')

Это было действительно все, что мне было нужно... Извините за мой нубистский вопрос:)

Answer 1

Вы можете связать диалоги в JQM. И так как ты больше ничего не делаешь в своем onClick обработчики, чем просто changePage почему бы просто не сделать все это декларативно.

<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>

Вот jsFiddle