Develop Reference

Blank page between transitions jQuery Mobile

When using transitions to navigate between two pages in my jQuery Mobile application, I see a blank page between the two pages. This behavior occurs at least on the Slide transition, fade does not show this behavior.
My page structure is like this:
<div id="MainPanelPage" data-role="page">
<div id="MenuLeft" data-role="panel">
...
</div>
<div data-role="header">
...
</div>
<div data-role="ui-content">
...
</div>
</div>
<div id="BannerPage" data-role="page">
<div data-role="header">
...
</div>
<div data-role="ui-content">
...
</div>
</div>
Note: jQuery Mobile wraps these divs into a global div automatically.
I am calling the transition with the following link:
<input type="submit" name="ctl25" value="Meer informatie" onclick="$.mobile.navigate('#BannerPage', { transition: 'slide' });" data-role="button" href="#BannerPage" data-transition="slide">
Please note that I am running ASP.NET and the language is kind of dirty in combination with jQuery Mobile.
I am running jQuery Mobile 1.4.5. After spending hours of trying I decided to ask here for a possible solution. Thanks in advance.

How to call a popup from a link inside another popup. Jquery Mobile

I have a popup like this:
<div data-role="popup" id="popup1">
Link to open popup
</div>
And the div for the popup with id="pop" is:
<div data-role="popup" id="pop">
<!-- Content Here -->
</div>
So how do I open the popup with id="popup" from a link which is already inside a popup.
I tried the regular way. Did not work!
$("#popup1").popup('close');
$("#pop").popup('open');
Even the above did not work!

JQM Popups cannot be chained. You have to fire the second after a timer delay.
See the JQM documentation and search for "chain": http://api.jquerymobile.com/popup/

jQuery Mobile: Programatically opening a Dialog right after closing another

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.
Register
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 :)

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

Jquery Mobile, not working dialog

I can not see why it is not working this dialog. I am using jqm 1.3
Open dialog
<div id="foo" data-role="dialog">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
I have added on the "head"
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js>
and others jqm events are working.

You need to wrap your anchor tag which invokes the dialog inside a page div as given below.
<div data-role="page">
<div data-role="content">
Open dialog
</div>
</div>
<div id="foo" data-role="dialog">
<div data-role="header" data-theme="d">
<h1>Dialog</h1>
</div>
<div data-role="content">
<h1>Delete page?</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
Sounds good
Cancel
</div>
</div>
You can check out an example at Live fiddle

Reopenning JQM dialog

Hi and happy new year,
There is this JQM dialog, which opens likes this via an AJAX call
$('#calendar-event-form-container').html(HTML).toggle();
$("#calendar-event-form-container").dialog({theme:'a'});
and closes by
$("#calendar-event-form-container").dialog('close');
$("#calendar-event-form-container").toggle();
Next time the dialog is opened it loses its JQM theme and position .
Can anybody see where the code has gone wrong?
Thanks in advance
Sincerely,
Babak

andleer is correct, don't use toggle() with jQM, it is not needed. jQM dialog is created to be used as a separated page. Take a look at this example:
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
Open dialo
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<!-- DIALOG BOX -->
<div data-role="page" id="dialog-box" data-theme="b">
<div data-role="header">
<h1>Warning</h1>
</div>
<div data-role="content">
<h3 id="dialog-msg">
Dialog test
</h3>
<a href="#" data-role="button" id="close-button">
Close dialog
</a>
</div>
</div>
Also if possible you should open dialog box like this:
$.mobile.changePage('#dialog-box', {transition: 'pop', role: 'dialog'});
In case you are dynamically changing dialogbox content you must trigger pagecreate on it to restyle it correctly:
$('#dialog-box').trigger("pagecreate");
And here's a full jsFiddle example: http://jsfiddle.net/Gajotres/fXzWj/

Showing and Hiding a form as a dialog with toggle() is non-standard. The jQuery Mobile dialog is designed to show or hide a page <div data-role="page"> container. As such, it is assumed to be outside of the current page and won't be visible until displayed as a dialog.
http://jquerymobile.com/demos/1.2.0/docs/pages/dialog/index.html
"Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link"