I'm having a difficult time wrapping my head around this issue, and I'm hoping some of you can shed some light on this for me.
I have seen plenty of questions being asked which center around executing a script before (pagebeforeshow) or after page load (pagechange), and these commands are designed to excute a function or a script automatically. What I want to do is to allow the user to call the specific function as needed, during the course of using the page. An example will better illustrate what I'm talking about.
In this simple example, I have two html pages, page1.html and page2.html respectively. The code for page1.html is as follows.
page1.html
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page 1 content goes here.</p>
<p></p>
<a href="page2.html" data-role="button" data-transition="slide">Next Page</a>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
<script type="text/javascript">
$(document).on('pagebeforeshow', '#page1', function() {
alert('this is page 1');
});
</script>
</div><!-- /page -->
</body>
</html>
To test the script loading of page1, I have added a function that displays an alert before the page is created. Works as expected.
page2.html
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="page2">
<div data-role="header" data-theme="b">
<h1>Page 2</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page 2 content goes here.</p>
<p></p>
<a href="page1.html" data-role="button" data-transition="slide" data-direction="reverse">Prev Page</a>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h4>Page Footer</h4>
</div><!-- /footer -->
<script type=text/javascript">
$(document).delegate("#page2", "pageinit", function() {
//load any custom page specific scripts here
$.getScript( "js/alert2.js", function() {});
});
</script>
</div><!-- /page -->
</body>
</html>
On page2, I am loading a script (alert2.js) after the page is loaded. This command
$.getScript( "js/alert2.js", function() {});
Getscript, loads the alert2.js file, which looks like this:
alert2.js
alertPageTwo();
function alertPageTwo() {
alert("this is page two");
}
The Getscript command will load the the specific javascript file and immediately run the contents. (Because I have added a function call in the alert2.js file). This of course works as it should, but this is not really what I'm after.
What I'm really trying to do is build a js file with a series of functions in it that I can call on s necessary during the course of the page.
So the alert2.js file ideally would look like this:
alert2.js (notice the removal of the function call)
function alertPageTwo() {
alert("this is page two");
}
and then I could call the function from the page2.html script block like so when clicking on a link:
page2.html
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="page" id="page2">
<div data-role="header" data-theme="b">
<h1>Page 2</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page 2 content goes here.</p>
<p></p>
<a href="page1.html" data-role="button" data-transition="slide" data-direction="reverse">Prev Page</a>
<a id="link" href="#">Link</a>
</div><!-- /content -->
<div data-role="footer" data-theme="b">
<h4>Page Footer</h4>
</div><!-- /footer -->
<script type=text/javascript">
$.getScript( "js/alert2.js", function() {});
$('#link').click(function () {
alertPageTwo();
});
</script>
</div><!-- /page -->
</body>
</html>
Notice that I have added a link, and modified the script block at the bottom so that the function is called when the link is clicked. Unfortunately, this doesn't work.
If this were just a standard web page, I could load the alert2.js file in the head section, and then call it whenever I want. However because these pages are targeted for mobile, I have attempted to follow the mobile docs and split the content into two pages, (with the first page loading all the global css and js files in the head, and page 2 loading a specific js file) and I'm completely stuck on figuring out how to call the function from the page as needed, not at page creation time.
There must be some basic thing I'm missing here, so I would appreciate any suggestions you might all have.
thanks!