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">
<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 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">
<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> </td>
</tr>
<tr id="eventtype">
<td>test2:</td>
<td> </td>
</tr>
</table>
</div>
</div>
What can I do?
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");
};
I used this simple function for the work-around:
function myPopup(myPage) {
history.back();
setTimeout(function () {
$(myPage).popup('open');
}, 100);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With