Home/ Questions/Q 8927239
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T08:10:27+00:00

I know there are similar question regarding this topic on stack overflow; however, I

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0