jQuery Mobile breaks Phonegap deviceready event

Question

So i've gotten jQuery 1.8.2 working with Phonegap no problem, but as soon as I add in jquery.mobile.1.2.0, the default Phonegap example breaks. the deviceready event stops firing.

index.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>
<body>
    <div class="app">
        <h1>Apache Cordova</h1>
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>
    <input   type="text" name="firstname" id="firstname" />  
    <a href="#" class="btn" onclick="displayHello();">Say Hello</a>
    <script type="text/javascript" src="cordova-2.4.0.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
        function displayHello(){
            var name = document.getElementById("firstname").value;  
            navigator.notification.alert("My name is "+ name);  
        }
    </script>
</body>
</html>

index.js

var app = {
// Application Constructor
initialize: function() {
    this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
    document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
    app.receivedEvent('deviceready');
},
// Update DOM on a Received Event
receivedEvent: function(id) {
    var parentElement = document.getElementById(id);
    var listeningElement = parentElement.querySelector('.listening');
    var receivedElement = parentElement.querySelector('.received');

    listeningElement.setAttribute('style', 'display:none;');
    receivedElement.setAttribute('style', 'display:block;');

    console.log('Received Event: ' + id);
}
};

So this is the default code example Phonegap comes with, and i've only added

<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>

in index.html.

Not sure what is going on as it seems other people have gotten Phonegap and jQuery Mobile to work just fine together.

I've tried dumbing the js down and just calling the deviceready event.

And I've tried following this solution and the other posted below it to no avail.

Correct way of using JQuery-Mobile/Phonegap together?

But the same thing happens. With jQuery Mobile deviceready never fires, without it, it fires fine.

Any help would be appreciated! Maybe i'm just missing something simple here.

I have also tried different version combinations of jQuery and jQuery Mobile with no luck. I was running the Android Phonegap version and cordova-2.3.0. I recently tried upgrading to cordova-2.4.0 to see if that would help but nothing...

Update: No errors are thrown in the LogCat/DDMS

I had all the scripts loading in the body, I moved them to the and it seems to work. I'm testing it on a different computer at the moment, i'll try it when I get home as well to be sure. As I should have done earlier I looked up the onDeviceReady event for phonegap and their full example has the javascript loading in the head and using to call app.initialize(); http://docs.phonegap.com/en/2.4.0/cordova_events_events.md.html#deviceready — Cameron, Feb 20 '13 at 18:12

Jai · Answer 1 · 2013-02-20T10:20:32.280

0

Try putting scripts above jquery mobile library.:

<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();
    function displayHello(){
        var name = document.getElementById("firstname").value;  
        navigator.notification.alert("My name is "+ name);  
    }
</script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>

updates:

<script type="text/javascript">
    $(document).on('pageinit', function($){
        app.initialize();
    });
</script>

edited Feb 20 '13 at 10:20

answered Feb 20 '13 at 09:44

Jai

74,255
12
74
103

Thanks for the answer, I just tried it and it didn't seem to make a difference. – Cameron Feb 20 '13 at 09:48
updated the answer, have you tried like this and once try with `$(function(){app.initialize()});`. – Jai Feb 20 '13 at 09:54
I tried this as well and same thing. Works fine when the jQuery Mobile script is out, and stops working when I put it back in (Doesn't matter if its before or after the app.initialize()) – Cameron Feb 20 '13 at 10:11
checkout the final update if this works then fine otherwise there might be other issues with the script, it seems. – Jai Feb 20 '13 at 10:21
Thanks again, but this time with pageinit and no jquery mobile, app.initialize() doesn't run which makes sense. With pageinit and jquery mobile, the app.initialize() runs, but deviceready never fires. – Cameron Feb 20 '13 at 10:39

score 0 · Answer 2 · answered Feb 20 '13 at 09:52

I had the same issue a while ago and I ended up throwing out the launcher of phonegap.

I suggest doing it like so :

<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        // your functions here
    }
</script>

I hope it helps

Thanks, I tried this as well and nothing, same as before. With jquery mobile it doesn't fire, without it fires. — Cameron, Feb 20 '13 at 10:14

score 0 · Answer 3 · answered Feb 24 '13 at 19:07

0

I noticed that the browser does not work, but using the emulator or PhoneGap build ondeviciready event and the same example works!

answered Feb 24 '13 at 19:07

Cadu Oliveira

1

score 0 · Answer 4 · answered Aug 12 '14 at 20:06

I had the exact same problem even after adding the libraries to the head, but as soon as I moved cordova.js below jquery-mobile, deviceready started firing again.

<head>
<script type="text/javascript" src="jqueryMobile/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jqueryMobile/jquery.mobile-1.4.3.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();
</script>
</head>

jQuery Mobile breaks Phonegap deviceready event

4 Answers4

updates: