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.
3 answers
solution1
1 ACCPTED 2012-11-08 14:05:04
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>
solution2
0 2012-11-08 20:27:40
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.
solution3
0 2013-09-03 16:19:14
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.