JQM Nested Popups - jquery-mobile

Question

I am having a hard time with the new Alpha release of JQM not showing nested popups. For example, I am displaying a popup form that the user is supposed to fill out, if the server side validation fails, I want to display an error popup. I am finding that the error popup is not being shown. I suspect that it is being shown below the original popup.
function bindSongWriterInvite() {
// Bind the click event of the invite button
$("#invite-songwriter").click(function () {
$("#songwriter-invite-popup").popup("open");
});
// Bind the invitation click event of the invite modal
$("#songwriter-invite-invite").click(function () {
if ($('#songwriter-invite').valid()) {
$('#songwriter-invite-popup').popup('close');
$.ajax({
type: 'POST',
async: true,
url: '/songwriter/jsoncreate',
data: $('#songwriter-invite').serialize() + "&songName=" + $("#Song_Title").val(),
success: function (response) {
if (response.state != "success") {
alert("Should be showing error dialog");
mobileBindErrorDialog(response.message);
}
else {
mobileBindErrorDialog("Success!");
}
},
failure: function () {
mobileBindErrorDialog("Failure!");
},
dataType: 'json'
});
}
});
// Bind the cancel click event of the invite modal
$("#songwriter-invite-cancel").click(function () {
$("#songwriter-invite-popup").popup("close");
});
}
function mobileBindErrorDialog(errorMessage) {
// Close all open popups. This is a work around as the JQM Alpha does not
// open new popups in front of all other popups.
var error = $("<div></div>").append("<p>" + errorMessage + "</p>")
.popup();
$(error).popup("open");
}
So, you can see that I attempt to show the error dialog regardless of whether the ajax post succeeds or fails. It just never shows up.
Anyone have any thoughts?
Mike

Answer 1

I found a solution!
I set a delay on the bindErrorPopup function to wait until the popup close animation completes.
function mobileBindErrorDialog(errorMessage, delay) {
var error = $("<div></div>").attr({
'data-rel': "popup",
'data-theme': "a"
});
$(error).append("<p>" + errorMessage + "</p>")
.popup({
overlayTheme: "a",
positionTo: "window",
theme: "a"
});
setTimeout(function () {
$(error).popup("open");
}, delay);
}
Works awesome!