JQM: $.mobile.changepage not loading external .JS file

Question

I am having a weird problem when trying to load an external JS file in a page which is loaded using $.mobile.changepage().

Following is my directory structure:

|_ /html
|   |_ conflist.html
|   |_ newpage.html
|_ /common
|   |_ jquery-1.7.2.min.js
|   |_ jquery.mobile-1.2.0.min.js
|   |_ jquery.mobile-1.2.0.min.css
|_ /platform
    |_ dummy.js

Here are the codes for conflist.html and newpage.html.

First, conflist.html:

<!DOCTYPE HTML>
<html>
<head>
    <title>ConferenceToGo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="../common/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" charset="utf-8" src="../common/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../common/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" charset="utf-8">
        function changePage() {
            $.mobile.changePage("newpage.html", { transition: "slide" });
        }
    </script>
</head>
<body>
<div id="firstpage" data-role="page">
    <div data-role="content">
        <input type="button" onclick="changePage()" value="Change Page (JQM)" /><br />
    </div><!-- /content -->

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

</body>
</html>

Next, newpage.html:

<!DOCTYPE HTML>
<html>
<head>
    <title>ConferenceToGo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="../common/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" charset="utf-8" src="../common/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="../common/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="newpage" data-role="page">
    <script type="text/javascript" charset="utf-8" src="../platform/dummy.js"></script>
    <script type="text/javascript" charset="utf-8">
        console.log("Inside test_newpage.html");
        var objDummy = new Dummy();
        objDummy.toString("test param");
    </script>
    <div data-role="content">
        <p>This is a new page !!</p>
    </div><!-- /content -->

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

</body>
</html>

Finally, dummy.js:

var Dummy = function () { };
Dummy.prototype.toString = function (param) {
    console.log("String representation of 'Dummy', got param: " + param);
};

console.log("Loaded dummy.js");

Problem:

If I load conflist.html (directly, using FF16.0.2 and IE9, not through a webserver), and click the button, I get an error saying: "ReferenceError: Dummy is not defined". Essentially, dummy.js is not read.
If I move dummy.js to the same folder as the html files, and modify the path accordingly in newpage.html, things work fine and I get all the outputs.

Wondering, why do I see this behavior? Why isn't the external js file loaded when it is placed in another folder and the relative path is given?

Update: I checked and this also works if I put dummy.js in a subfolder inside the html folder. Just can't have it outside it seems, unless I am missing something.

score 1 · Accepted Answer · answered Nov 08 '12 at 14:05

1

try to put your <script src="../platform/dummy.js"></script>into the head instead of the body... and: you do not need type="text/javascript" charset="utf-8"anymore...

<head>
    <title>ConferenceToGo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="../common/jquery.mobile-1.2.0.min.css" />
    <script src="../platform/dummy.js"></script>
    <script src="../common/jquery-1.7.2.min.js"></script>
    <script src="../common/jquery.mobile-1.2.0.min.js"></script>
</head>

answered Nov 08 '12 at 14:05

Taifun

6,165
17
60
188

That did not work. In general that shouldn't work - when changepage() is used, jquery only pulls in the first div with data-role="page", header and other page divs are ignored. See these questions: [http://stackoverflow.com/questions/7449402/jquery-mobile-mobile-changepage-not-loading-external-js-files] and [http://stackoverflow.com/questions/10540219/jquery-mobile-change-page-doesnt-load-js-files]. Thanks for the reply. – Samik R Nov 08 '12 at 16:25
yes, but see this comment in your first [link](http://stackoverflow.com/questions/7449402/jquery-mobile-mobile-changepage-not-loading-external-js-files) `I generally put all the functional JavaScript for my site on the index page and then when external pages are loaded into the dom they can benefit from the already loaded scripts.` – Taifun Nov 08 '12 at 16:54
and also see the [update](http://stackoverflow.com/a/7449731/1545993) `A good system for this is to put all of your JS into an include file and include it on each page of the site. It will be ignored if pages are brought into the DOM by AJAX, but if someone refreshes somewhere in your site, the JS will be available` – Taifun Nov 08 '12 at 17:02
Oh - sorry - did not understand. Yes, that of course works, but my question was why something, which is supposed to work and is not wrong, is not working? For other reasons, I do not want to do this way in the final product. Thanks. – Samik R Nov 08 '12 at 17:48
Ended up doing this (adding all relevant JS files in the first html file), since couldn't find a solution. I also logged a bug with JQM - will see if something comes up. Moving on. – Samik R Nov 11 '12 at 06:26

score 0 · Answer 2 · answered Nov 08 '12 at 20:27

Change your relative URLs to absolute ones. This will make sure you are referencing the correct file every time.

Your external page would look like this for example:

<!DOCTYPE HTML>
<html>
<head>
    <title>ConferenceToGo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href="/base/common/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" charset="utf-8" src="/base/common/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/base/common/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="newpage" data-role="page">
    <script type="text/javascript" charset="utf-8" src="/base/platform/dummy.js"></script>
    <script type="text/javascript" charset="utf-8">
        console.log("Inside test_newpage.html");
        var objDummy = new Dummy();
        objDummy.toString("test param");
    </script>
    <div data-role="content">
        <p>This is a new page !!</p>
    </div><!-- /content -->

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

</body>
</html>

Where /base/ is a top-level directory on your domain.

Thanks for replying. I am wondering, how would I specify the base in the file, for e.g., an Android app? The files are in the app package, in the assets/www folder. There isn't really a complete URL that I can define as there is no concept of webserver. Any ideas? — Samik R, Nov 08 '12 at 23:21
@SamikR Have you tried to use `/assets/www/` as the base of your absolute URL? — Jasper, Nov 09 '12 at 00:33
Currently I am testing the html pages in a desktop. I just load the files in FF by double clicking on them. Haven't tried within android yet. I tried defining a base tag in the head section as follows: — Samik R, Nov 09 '12 at 16:20

score 0 · Answer 3 · answered Sep 03 '13 at 16:19

I think the reason might be the relative path of your js. I found that if you are using $.mobile.changePage(); only contents in the target page between the will be loaded, which means all the header content in target page will be ignored/not loaded. And when you reference js in the on your target page, the relative path should be base on the target html. and the "../" seems not working in this case.

JQM: $.mobile.changepage not loading external .JS file

3 Answers3