Making jQuery mobile work with PhoneGap for android application
The Google Maps based jQuery Mobile application is running fine on
browsers, however I am having hard time trying to wrap it as an android
application using PhoneGap. All I get is just plain html with no styling
and javascript interaction. And of course no map as well. I am using
Eclipse on Windows 7 with android build target of 4.0. The AVD is targeted
for v 2.2 above. In my belief the problem has essentially to do with
incorrect way of loading the JQM with PhoneGap. I am loading the libraries
from CDN.
Apart from whole lot of other things, in my logcat I also get following
things:
TypeError: Result of expression 'e' [undefined] is not an object at
http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js
ReferenceError: Can't find variable: $ at
file:///android_asset/www/index.html:22
deviceready has not fired after 5 seconds. at
file:///android_asset/www/cordova.js:6725
My page structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css"
/>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJWtBGtXPE9BeyZyEc8lFvi3I0fs_-7mY&sensor=false"></script>
<script type="text/javascript" src="markerwithlabel_packed.js"></script>
<script>
var deviceReadyDeferred = $.Deferred();
var jqmReadyDeferred = $.Deferred();
document.addEventListener("deviceReady", deviceReady, false);
function deviceReady() {
deviceReadyDeferred.resolve();
}
$(document).one("pageinit", function () {
jqmReadyDeferred.resolve();
});
$.when(deviceReadyDeferred,
jqmReadyDeferred).then(doWhenBothFrameworksLoaded);
function doWhenBothFrameworksLoaded() {
//All my application logic goes here
}
</script>
<style type="text/css">
...All my css
</style>
</head>
<body>
// My multipage template
</body>
</html>
Note: I am using all my css and js in this same page. I don't have
separate custom js or css pages.
I followed the approach I found here.
I have been trying to figure this out with no success.
No comments:
Post a Comment