Making jQuery mobile work with PhoneGap for android application

Question

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.

It's probably best to have all the jQuery files/css stored locally rather than through the CDN to avoid simple problems like whitelisting. That might solve some of the issues (or is at least a good test to make sure). — Drew B., Aug 06 '13 at 13:27
Has using the files through CDN been a documented issue in the case of Phonegap? I am not aware of this, I will give it a try. — SASM, Aug 06 '13 at 13:31
Well, it's possible that it can become an issue when again the `domain whitelisting` isn't correctly formatted. For example, if you're using PhoneGap Build, there was a bug where `whitelisting` wasn't working correctly. I'm not sure if it's been solved but here was the topic about the bug. [Whitelisting Bug](http://community.phonegap.com/nitobi/topics/access_elements_not_working_on_android) — Drew B., Aug 06 '13 at 13:35
Seems like that was the case indeed. But all the while googling and searching here in SO, I did not realize that would be an issue. People were posting codes with both kind of approaches of using CDN as well as local copies. The map is not displaying and the images are missing, but at least the application seems to be running now. Post as an answer and I will accept it. — SASM, Aug 06 '13 at 14:00

score 0 · Answer 1 · answered Aug 06 '13 at 14:39

Another method for starting a PhoneGap app that does not use JQuery, just plain JavaScript could be done like so.

<script>
  var initApp = function() {
    document.addEventListener("deviceReady", deviceReady, false);
  }
</script>

<body onload="initApp()">
  ....
</body>

Also as Drew Boatright mentioned, I think it is a good idea to store the JQuery files locally as well for the same reasons he mentioned plus if there is a bad internet connection which causes some delay's in getting the code from the CDN, you wouldn't want your app to freeze or crash. This is generally good practice because if your user's open your app when they have no internet connection, you would still want the app to open and show something, even if it is just a message stating none of the features are available without internet connection, that is better than a white screen or a crashing application. Hope this helps.

Drew B. · Accepted Answer · 2013-08-06T19:06:03.123

As I mentioned in the comments, the issue came about due to including the jQuery files from the CDN. The whitelisting was most likely not formatted correctly, or used correctly.

To solve the issue all the needed to be done was use local versions of the jQuery files rather than from the CDN.

Local versions of files also prevents problems like the user not having an internet connection and various issues like that.

Making jQuery mobile work with PhoneGap for android application

2 Answers2