Cannot get JQueryMobile CSS/JS to load in PhoneGap

Question

I'm trying to set up a basic example using PhoneGap and JQuery mobile. I cannot get the page to load properly in my browser. The problem is the page is just rendering like normal html.

Sources I've consulted..
http://docs.phonegap.com/en/2.4.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android_2_install_sdk_cordova http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html http://jquerymobile.com/demos/1.2.0/docs/pages/phonegap.html

It should look like this: http://jquerymobile.com/demos/1.2.0/docs/pages/page-template.html

What I'm getting:
enter image description here

My folder structure:

/assets/  
-/www/  
--/cordova-2.4.0.js  
--/index.html  
--/jquery-1.8.2.js  
--/jquery.mobile-1.2.0.css  
--/jquery.mobile-1.2.0.js

Here's my basic html page:

<!DOCTYPE HTML>
<html>
    <head>
        <title>PhoneGap</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
        <link rel="stylesheet" type="type/css" href="jquery.mobile-1.2.0.css"/>
        <script src="jquery-1.8.2.js"></script>
        <script src="jquery.mobile-1.2.0.js"></script>
    <body> 

        <div data-role="page">

            <div data-role="header">
                <h1>Single page</h1>
            </div><!-- /header -->

            <div data-role="content">   
                <p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>      
                <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
                <p>This template is standard HTML document with a single "page" container inside, unlike a <a href="multipage-template.html" data-ajax="false">multi-page template</a> that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p>
            </div><!-- /content -->

            <button>text</button>

            <div data-role="footer">
                <h4>Footer content</h4>
            </div><!-- /footer -->

        </div><!-- /page -->

    </body>
</html>

Edit: Here's what's in my logcat..

02-20 11:31:47.342: E/Web Console(18138): Uncaught SyntaxError: Unexpected token ; at file:///android_asset/www/jquery.mobile-1.2.0.js:2655

Here's a link to google drive with my www folder in it...
https://docs.google.com/folder/d/0B3ALaz5FfLwgZUJjdW1PTnJyblE/edit?usp=sharing

Try using JQuery Mobile CDN-hosted. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> — Omar
– Omar, Commented Feb 20, 2013 at 17:28
I wouldn't do that ... your JS assets need to be locally-sourced for a mobile phone, or you run the risk of them not being able to be loaded after the project is compiled and installed. — Jason M. Batchelor
– Jason M. Batchelor, Commented Feb 20, 2013 at 17:30
I see you have a reference to jquery.mobile-1.2.0.js but the structure you listed just says jquery.mobile.js ... have you double checked to make sure that the files are being loaded with the correct names? You can look in Firebug or Chrome's Developer tools to check for any 404's for those assets. I'd check there, first, and make sure that all the files that you're trying to load are being loaded by the page. — Jason M. Batchelor
– Jason M. Batchelor, Commented Feb 20, 2013 at 17:32
That was my mistake.. It's actually jquery.mobile-1.2.0.js in the file structure. — ryandawkins
– ryandawkins, Commented Feb 20, 2013 at 17:35
If I add the links CDN-Hosted it loads fine, but like mori57 said, that's not a good way to do it.. — ryandawkins
– ryandawkins, Commented Feb 20, 2013 at 17:38

Gajotres · Accepted Answer · 2013-02-20 18:12:05Z

2

Your problem is in jquery-1.9.1.js , jQuery Mobile 1.2 is not going to work with any jQuery above version 1.8.3.

You can even test it on this jSFiddle example: http://jsfiddle.net/Gajotres/yWTG2/, you only need to change jQuery version in top left corner. Change it to a 1.9.1. and everything will brake.

So change this:

<script src="jquery-1.9.1.js"></script>

to a version 1.8.3.

EDIT :

I have downloaded your source. I found that your jQuery Mobile css and js source are the problem, redownload them from my jsFiddle example. Then everything will work correctly.

edited Feb 20, 2013 at 18:12

answered Feb 20, 2013 at 17:37

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jason M. Batchelor Over a year ago

The docs themselves agree: jquerymobile.com/demos/1.2.0 "For jQuery 1.7.0 to 1.8.2."

ryandawkins Over a year ago

Just tried updating it to version 1.8.2 and that did not work :\ Edit: I updated my OP to match my current code/folder structure.

Gajotres Over a year ago

something is wrong with your jQuery Mobile css and js file. Redownload them again, use my jsFiddle example as a source. Everything works with new files, and jQuery 1.8.2

ryandawkins Over a year ago

It was something wrong with the files.. I don't know what though :\

Collectives™ on Stack Overflow

Cannot get JQueryMobile CSS/JS to load in PhoneGap

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related