I cannot open popup dialog with Phonegap on iOS mobile

Question

I have a strange problem with Phonegap on iOS platform. On Android, "popup" works correctly. I have this code:

<button data-rel="popup" data-position-to="window" data-transition="pop" id="prueba23">Botón</button>
<div data-role="popup" id="popupDialog">
    <div data-role="header" data-theme="a" style="top:-21px">
        <h1>Delete Page?</h1>
    </div>
    <div role="main">
        <h3 class="ui-title">Are you sure you want to delete this page?</h3>
        <p>This action cannot be undone.</p>
    </div>
    <div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="#test-ries" data-role="button" data-icon="info"   data-iconpos="notext">Volver</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
$('#prueba23').on('tap', function(e){
    e.preventDefault();
    $('#popupDialog').popup('open');
});
</script>

and on iOS platform, at first time that I tap button, popup's appears and dissapears after a second. On second (and third, fourth,...) time, popup works correctly. Only has a strange behaviour at first time that I tap the button.

Here you have an example video that I record: https://www.youtube.com/watch?v=HTkrUr1vpsM&feature=youtu.be Thank you.

Answer 1

I assume you are testing on iOS 9 and, from the looks of your HTML, using jQuery Mobile in your app. If so, you've come across a bug/"feature" introduced into iOS 9 which is that setting of window.location.hash is asynchronous in the iOS 9.0 UIWebview (used by Cordova/Phonegap) - see this bug report for details.

This causes issues when using jQuery Mobile, which by default uses window.location.hash to navigate between "pages". It also causes issues with popups/dialogs/select menus which use this mechanism, hence the symptoms you are seeing. Note that Safari on iOS 8 and 9 uses WKWebView not UIWebView, hence JQM sites viewed in the browser on iOS 9 don't encounter these issues.

You can fix these issues on iOS 9.0 Cordova apps by preventing jQuery Mobile from automatically listening/using location.hash:

$(document).on("deviceready", function(){
    $.mobile.hashListeningEnabled = false;
});

However, I found this had side effects on Android such as causing the hardware back button not to work, so I targeted it specifically at iOS 9 using cordova-plugin-device:

$(document).on("deviceready", function(){
    if(device.platform === "iOS" && parseInt(device.version) === 9){
        $.mobile.hashListeningEnabled = false;
    }
});

This fixed my navigation and popup issues, but others have said that setting data-history="false" on the popup div fixed the issue for them, so if the above doesn't work, try this too.

Alternatively you can use this plugin to use the new WKWebView on iOS 8 and 9 with your Cordova app. cordova-ios 3 still uses UIWebView due to a bug in WKWebView in iOS 8, but the upcoming cordova-ios 4 will support a WKWebView core plugin for iOS 9+. Note that there are additional considerations when using WKWebView with Cordova/Phonegap apps due to its stricter security, such as requiring CORS headers on XHR responses.