Cannot get jQuery mobile to work with PhoneGap

Question

I know there are similar question regarding this topic on stack overflow; however, I have not been able to figure out my issue yet.

I'm very new to App development, and right now trying to create an app for iphone using phonegap and jquery mobile. Unfortunately, I'm not able to apparently get the referenced files load correctly.

Edit:

Here is the new structure that's working for me:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <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" />

    <script src="jquery_mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery_mobile/jquery.mobile-1.2.0.min.css" />
    <script src="jquery_mobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
    <script src="http://debug.phonegap.com/target/target-script-min.js#anonymous"></script>
    <script type="text/javascript">
        var deviceReadyDeferred = $.Deferred();
        var jqmReadyDeferred = $.Deferred();

        document.addEventListener("deviceReady", deviceReady, false);

        function deviceReady() {
            deviceReadyDeferred.resolve();
        }

        $(document).one("mobileinit", function () {
                        jqmReadyDeferred.resolve();
                        });

        $.when(deviceReadyDeferred, jqmReadyDeferred).then(doWhenBothFrameworksLoaded);

        function doWhenBothFrameworksLoaded() {
            // TBD
        }
</script>
</head>
<body>
    <div class="app">
        <div id="deviceready" class="blink">
            <p class="event listening">Connecting to Device</p>
            <p class="event received">Device is Ready</p>
        </div>
    </div>

    <!-- Homepage -->
    <div data-role="page" id="home">
        <div data-role="header">
            <h1>Some Title</h1>
        </div><!-- /header -->
        <div data-role="content">
            <ul data-role="listview" data-inset="true" data-theme="e">
                <li><a href="#about-us">About US</a></li>
                <li><a href="#">Audi</a></li>
            </ul>
        </div><!-- /content -->
        <div data-role="footer">
            <h4>Pgae Footer</h4>
        </div>
    </div><!-- /page -->

    <!-- About Us -->
    <div data-role="page" id="about-us" data-title="About Us">
        <div data-role="header">
            <h1>Some Other Title</h1>
        </div><!-- /header -->
        <div data-role="content">
            <p>About Us</p>
        </div><!-- /content -->
        <div data-role="footer">
            <h4>Pgae Footer</h4>
        </div>
    </div><!-- /page -->
</body>
</html>

score 1 · Answer 1 · answered Nov 27 '12 at 00:21

1

Does it work when loaded in a browser? deviceready won't fire in that case of course, but it should give you a better view of the script running so that you can fix the other errors.

Some of the more obvious things to look into:

Where is app defined?
Why is the phonegap script in the page body?
There is no consistent structure to your script paths. Are the urls all correct?

answered Nov 27 '12 at 00:21

Tom Clarkson

16,074
2
43
51

Thanks Tom, can you tell me how I can view the app in browser? I borrowed that structure from here (second answer): http://stackoverflow.com/questions/10945643/correct-way-of-using-jquery-mobile-phonegap-together – farjam Nov 27 '12 at 13:17
Just double clicking on the html file usually does it. That wasn't the best answer you could have found to copy from. A better option would be to get a pure html jquery mobile app working, then add the phonegap bits. – Tom Clarkson Nov 27 '12 at 13:50
Sorry for the late response. I was learning the xcode interface so much that I forgot I could actually open the file in the browser and debug there as well. I fixed the path issues, can you tell me what the proper way of calling jquery mobile and pgonegap scripts is? For some reason, even though both scripts are loading properly, the jm is not doing its magic. – farjam Nov 28 '12 at 15:41

score 1 · Accepted Answer · answered Nov 27 '12 at 16:20

Phonegap requires you to place your code into assets/www project directory (at lease on android platform), no matter where code must be in www dir. Lets continue with that assumption.

If you have this dir structure:

index.html
js/index.js
css/index.css

Then you can't have this href:

<link rel="stylesheet" type="text/css" href="/css/index.css" />

Instead of it use this one:

<link rel="stylesheet" type="text/css" href="css/index.css" />

So remove every first slash ("/") from all available href-s. Also from scr atributes like this one:

<script type="text/javascript" src="/js/index.js"></script>

Also change it to (and every other src which starts with / ):

<script type="text/javascript" src="js/index.js"></script>

Thanks and sorry for the late response. I fixed the paths following your advice, and I can confirm the scripts are loading properly; however, for some reason, jquery mobile is not doing its magic. — farjam, Nov 28 '12 at 15:43
Can you edit your question and replace it with new changed html? We will find a solution for your problem. — Gajotres, Nov 28 '12 at 15:57

Cannot get jQuery mobile to work with PhoneGap

2 Answers2