jQuery and Cordova index page loads wierdly

Question

I used suggestion from Correct way of using JQuery-Mobile/Phonegap together? and my index page looks like this:

<!DOCTYPE html>
<html>
    <head>
        <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" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
        <title>InforMEA</title>
    </head>
     <body>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            alert('About to use deferred .. ');
            var dd = $.Deferred();
            var jqd = $.Deferred();
            $.when(dd, jqd).done(doInit);

            $(document).bind('mobileinit', function () {
                jqd.resolve();
            });
        </script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript">
            alert('About to add device listener for cordova .. ');
            alert('is dd '+dd);
            document.addEventListener('deviceready', deviceReady, false);
            function deviceReady() {
                dd.resolve();
            }

            function doInit() {
                alert('Ready');
            }
        </script>
    </body>
</html>

The problem is the alert('Ready') is never called and alert('About to use deferred .. '); is called twice. Also I see a text/image called "Loading" at bottom that I cannot figure out the source of. I am not at all sure what's wrong. Please help.

I tried to remove jQuery and Cordova code one by one and individually they work fine - I mean I get alerts where I expect but cannot figure out why this doesn't work together.

Also - why do we need such a coordination between the 2 frameworks ? I understand we need both of the frameworks to load completely but why would they not load completely if I just did:

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="./cordova.js"></script>
<!-- start writing my code after this point -->

I am sure there is something about loading of jQuery and Cordova that I don't understand. Please advise what should I read.

Thanks in advance

just use local copy of jquery and jg Mobile, not youe live CDN — Arjun T Raj, Aug 13 '13 at 06:26
Raoul I have another issue with my S3 - it never shows up in list of adb devices but I can try this on emulator using eclipse to check for errors. Arjun - I am trying local copies now. — Asif, Aug 13 '13 at 06:34
$.when(dd, jqd).done(doInit()); this way it is showing alert Ready — L10, Aug 13 '13 at 07:21
Thanks L1010. That change does make the Ready call. But I still have to figure out why is "About to use deferred.. " being called twice and what is that Loading indicator at bottom. — Asif, Aug 13 '13 at 08:03

jQuery and Cordova index page loads wierdly

0 Answers0