Question

Using jquery mobile 1.2, I have a popup menu (OK/Cancel) which should be answered before changing to a new page. But the page changes (and the popup disappears) before it is clicked:

if (rider.time.valueOf() > 0) {
    $('#popupMsg').text("Rider has already finished; update the time?");
    $('#alreadyFinished').popup("open");
}
alert("rf");
// other code.......
$.mobile.changePage("#finishLine");
// other code.......

I put in the ‘alert’ just to prove that the popup does actually appear – there it is, behind the alert, but the popup closes (and the page changes) as soon as the alert is clicked. Also tried removing the ‘other code’ but still the same problem.

Here’s the html:

    <div data-role="popup" id="alreadyFinished" class="ui-content">
         <p id="popupMsg"></p>
         <a data-role="button" data-theme="b" id="OKBtn">OK</a>
         <a href="#finishLine" data-role="button" data-theme="c"  id="cancelBtn">Cancel</a>
     </div>

Even without the buttons in the popup, the popup doesn’t persist. So what’s wrong?

Answer 1

A jQuery Mobile popup is part of a page. Changing the page will close any current popup, so you should not directly call it following the opening of a popup. The following code would open your popup and not close it.

if (rider.time.valueOf() > 0) {
    $('#popupMsg').text("Rider has already finished; update the time?");
    $('#alreadyFinished').popup("open");
} else {
    alert("rf");
    // other code.......
    $.mobile.changePage("#finishLine");
// other code.......
}

If you want your popup to be modal, the simplest way is to bind the execution of the rest of your code to the closing of the popup. For instance, if you want the restOfCode function to be run after the popup is closed:

$('#alreadyFinished').popup("open");
$( "#alreadyFinished" ).on({
   popupafterclose: function(event, ui) {restOfCode()}
});