JQuery mobile open popup from popup

Question

I am using jQuery mobile 1.9.1 min in PhoneGap.
I have a list where each iten on click opens a popup action window:

 function showActions(index){ selectedIndex = index; $("#actionPopup").popup("open", {positionTo: '#list li:nth-child('+ index +')'}); } 

 <div data-role="popup" id="actionPopup" data-overlay-theme="a"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> <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 click on action1 using showDetails() , the method is called, but the second popup does not appear.

 function showDetails(){ console.log("showDetails"); $("#infoPopup").popup("open"); } 

 <div data-role="popup" id="infoPopup"> <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a> <div id="infoContent"> <table> <tr id="eventcode"> <td>test1:</td> <td>&nbsp;</td> </tr> <tr id="eventtype"> <td>test2:</td> <td>&nbsp;</td> </tr> </table> </div> </div> 

What can I do?

Answer 1

My decision

 $.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 to work:

 function myPopup(myPage) { history.back(); setTimeout(function () { $(myPage).popup('open'); }, 100); } 

Answer 3

@Rakoo has a nice answer. Here is a more compact version:

 $.mobile.switchPopup = function(sourceElement, destinationElement, onswitched) { sourceElement.one("popupafterclose", function() { destinationElement.popup("open") !onswitched || typeof onswitched !== "function" || onswitched() }).popup("close") }; 

If you do not need the onswitched function and you do not add it to $ .mobile, it can be so short and simple:

 $('#popup1').one("popupafterclose", function(){$('#popup2').popup("open")}).popup("close") 

Answer 4

It seems like pop-up chains are not possible .

Decision:

 $( document ).on( "pageinit", function() { $( '.popupParent' ).on({ popupafterclose: function() { setTimeout( function(){ $( '.popupChild' ).popup( 'open' ) }, 100 ); } }); }); 

Answer 5

I used this code to switch a popup from a popup that works fine.

 function switchpop() { $( '#popupMenu' ).popup( 'close' ); $( "#popupMenu" ).bind({popupafterclose: function(event, ui) { $( "#notes" ).popup( "open" ); } }); } 

Answer 6

After four hours of struggling with this, I solved the problem:

This is the function of pressing a button on the first pop-up menu.

  $('#popupCall').popup('close'); window.setTimeout(function () { $('#popupContact').popup('open') }, 50);