So, I got jQuery 1.8.2 working with Phonegap, no problem, but as soon as I add to jquery.mobile.1.2.0, the default Phonegap example is used. 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 that Phonegap comes with, and I only added
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
in index.html.
Not sure what is happening, as it seems that other people got Phonegap and jQuery Mobile to work together.
I tried disabling js and just raised the deviceready event.
And I tried to follow this decision, and another published below it to no avail.
The right way to share jQuery-Mobile / Phonegap?
But the same thing is happening. With jQuery Mobile, deviceready never works, without it, it works fine.
Any help would be appreciated! Maybe I just missed something simple here.
I also tried different combinations of jQuery and jQuery Mobile versions with no luck. I launched the version of Android Phonegap and Cordova-2.3.0. I recently tried upgrading to Cordova-2.4.0 to make sure this helps, but nothing ...
Update: no errors in LogCat / DDMS