Response title
This is preview!
- Screen name: samikr
samikr's Profile
3 Posts
5 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- 08-Nov-2012 11:41 AM
- Forum: jQuery Mobile
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.jsHere 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 or IE9, not through a webserver), and click the button to load newpage.html using changePage(), 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? Or am I missing something else?
- 24-Aug-2012 01:50 AM
- Forum: jQuery Mobile
I am trying to dynamically update the labels of two buttons in a controlgroup. The way I am doing it is updating the labels, but the controlgroup is not formed, rather two buttons appear separately side-by-side. Can anyone point me how this can be achieved?
Here is the relevant code:- // Set the button texts.
- $("#day-slot").empty();
- var markUp = "<a href='#' data-role='button' data-theme='e' onclick='popMenu(true)'>" + days[1] + "</a>" +
- "<a href='#' data-role='button' data-theme='e' onclick='popMenu(false)'>" + slots[2] + "</a>";
- $("#day-slot").append(markUp).trigger("create");
Here is the code in action: http://jsbin.com/abofaq/2
Thanks for any pointers.- I am working on a jquery mobile app which uses phonegap. In the app, I am dynamically loading a listview in a page with number of items greater than what can be shown on a single screen. When viewing in android emulator (Android 2.2), the listview is shown fine, and I can swipe or use the buttons to scroll down, but the vertical scrollbar is not visible. Do I have to do anything special for the vertical scrollbar to show up?
When I open a static version of the page in a browser (Firefox), the scrollbar does show up, but the same static page loaded in the app on the android emulator doesn't show the scrollbar (i.e., it seems that the behavior is consistent and has nothing to do with the dynamic nature of loading the listview).
I am using jquery 1.7.1, JQM 1.1.1, phonegap 2.0 (all most recent versions).
Here is the page code:
<!DOCTYPE HTML>
<html>
<head>
<title>Conference List</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="common/jquery.mobile-1.1.1.min.css" />
<script type="text/javascript" charset="utf-8" src="common/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="common/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="common/cordova-2.0.0.js"></script>
</head>
<body>
<div id="conf-list" data-role="page">
<div data-role="header">
<a href="#" class="ui-btn-left" data-icon="delete" onclick="exit()">Exit</a>
<a href="#" class="ui-btn-right" data-icon="refresh" onclick="downloadConfList(confFilePath)">Refresh</a>
<span class="ui-title" />
</div><!-- /header -->
<div data-role="content">
<ul data-role='listview' data-inset='true'>
<li data-role='list-divider'>Available Conferences:</li>
<li data-icon='false'>
<a href='javascript:openConference(2010041801)'>
<h4>Conference A1 2010</h4>
From 2010-04-18 to 2010-04-20<br />
Orlando, FL, USA
</a>
</li>
<!-- *** 10 more items as above *** -->
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
[Cross posted in StackOverflow]- «Prev
- Next »
Moderate user : samikr
© 2013 jQuery Foundation
Sponsored by and others.
