CODEWITHSUNDEEP
javascriptandroidjquery-mobilecordova
oimhead
oimhead

Reputation: 11

Embedded javascript won't execute using JQuery mobile on Apache Cordova

I'm using JQuery mobile on Apache Cordova for android. Javascript between the body tags works, but javascript files that I link to in the header don't execute, even on the first page loaded.

I read a lot about problems with JQuery loading javascript due to the way ajax parses linked pages - however in this case embedded javascript isn't even working on the main page, and I can't find any answers to this problem

Here is index.js: 

$(document).ready(function() {
  // Handler for .ready() called.
  document.addEventListener("deviceready", onDeviceReady, true);
});


function onDeviceReady() {
        alert('index js loaded successfully');

}

And here is index.html. The alert('index') works but alert('index js loaded successfully') does not appear

<html>
    <head>

        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1" />
        <link rel="stylesheet" href="css/jquery.mobile-1.4.0.css" />
    </head>
    <body>

    <script type="text/javascript">alert('index');</script>

        <script src="js/jquery-1.11.0.js"></script>
        <script src="js/cordova.js"></script>
        <script src="js/index.js"></script>
        <script src="js/jquery.mobile-1.4.0.js"></script>


<!-- Start of first page: #one -->
    <div data-role="page" id="one">

        <div data-role="header">
                <h1>Main Menu</h1>
        </div><!-- /header -->

        <div data-role="content" >

               <p> content here </p>

        </div><!-- /content -->

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


</body>
</html>

Upvotes: 0

Views: 803

Answers (1)

Drew B.
Drew B.

Reputation: 1145

You said embedded js isn't working on your main page yet your alert("index") works. That's slightly contradicting and confusing. Unless you're definition of embedded is different.

Regardless, I'm thinking that the javascript files aren't loading in the correct order.

For the project I use, I have something along the lines of:

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> //This order matters #1
<script type="text/javascript" src="js/MY_CUSTOM_JS_RAWR.js"></script> //This order matters #2
<script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script> //This order matters #3

Then, within the MY_CUSTOM_JS_RAWR file, I'm doing the method described in this answer.

Upvotes: 0

Related Questions