jQuery mobile open popup from popup - jquery-mobile

Question

I'm using jQuery mobile 1.9.1 min on PhoneGap.
I have a list where each iten on click opens an actions popup:
function showActions(index){
selectedIndex = index;
$("#actionPopup").popup("open", {positionTo: '#list li:nth-child('+ index +')'});
}
<div data-role="popup" id="actionPopup" data-overlay-theme="a">
Close
<ul data-role="listview">
<li data-role="divider">Actions</li>
<li data-icon="false" onclick="showDetails();">action1</li>
<li data-icon="false">action2</li>
<li data-icon="false">action3</li>
<li data-icon="false">action4</li>
</ul>
</div>
When I press on action1 with showDetails() them method is called but the second popup isn't shown.
function showDetails(){
console.log("showDetails");
$("#infoPopup").popup("open");
}
<div data-role="popup" id="infoPopup">
Close
<div id="infoContent">
<table>
<tr id="eventcode">
<td>test1:</td>
<td> </td>
</tr>
<tr id="eventtype">
<td>test2:</td>
<td> </td>
</tr>
</table>
</div>
</div>
What can I do?

Answer 1

My solution
$.mobile.switchPopup = function(sourceElement, destinationElement, onswitched) {
var afterClose = function() {
destinationElement.popup("open");
sourceElement.off("popupafterclose", afterClose);
if (onswitched && typeof onswitched === "function"){
onswitched();
}
};
sourceElement.on("popupafterclose", afterClose);
sourceElement.popup("close");
};

Answer 2

I used this simple function for the work-around:
function myPopup(myPage) {
history.back();
setTimeout(function () {
$(myPage).popup('open');
}, 100);
}

Answer 3

#Rakoo has a nice answer. Here is a leaner version:
$.mobile.switchPopup = function(sourceElement, destinationElement, onswitched) {
sourceElement.one("popupafterclose", function() {
destinationElement.popup("open")
!onswitched || typeof onswitched !== "function" || onswitched()
}).popup("close")
};
If you don't need the onswitched feature and aren't adding it to $.mobile, It can be this short and simple:
$('#popup1').one("popupafterclose", function(){$('#popup2').popup("open")}).popup("close")

Answer 4

It seems that chaining popups is not possible.
The solution:
$( document ).on( "pageinit", function() {
$( '.popupParent' ).on({
popupafterclose: function() {
setTimeout( function(){ $( '.popupChild' ).popup( 'open' ) }, 100 );
}
});
});

Answer 5

I used this code to switch popup from popup it works fine.
function switchpop()
{
$( '#popupMenu' ).popup( 'close' );
$( "#popupMenu" ).bind({popupafterclose: function(event, ui)
{
$( "#notes" ).popup( "open" );
}
});
}

Answer 6

After four hours of fighting with this I reduced the problem to this:
This is in a button click function on the first popup
$('#popupCall').popup('close');
window.setTimeout(function () { $('#popupContact').popup('open') }, 50);