How To Bind The Event "pageshow" For An External Html File With Jquery Mobile
I´m developing a web app using JQuery Mobile (ver 1.3.0). If a have only one HTML file, I can bind the 'pageshow' event to the page div:
Solution 1:
There are 2 possible ways here:
First solution. In case you are using multiple HTML files and all of them are loaded with an ajax (this is a standard jQuery Mobile way of page loading). In this case all of javascript must be loaded into the first html file, because jQM will load only BODY content of other html files.
Example :
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
alert('This is a first page!');
});
$(document).on('pagebeforeshow', '#second', function(){
alert('This is a second page!');
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header" data-theme="a">
<h3>First page</h3>
</div>
<div data-role="content">
<a data-role="button" id="some-btn" href="second.html">Open next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html :
<div data-role="page" id="second" data-theme="b">
<div data-role="header" data-theme="a">
<h3>Second page</h3>
</div>
<div data-role="content">
This is a second page
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
Second solution. In case you have multiple HTML files but all your pages are linked wit links having rel="external" attribute or ajax is turned of on app level. In this case every html page must have its own HEAD and BODY. And every page must have it own javascript.
Example :
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
alert('This is a first page!');
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header" data-theme="a">
<h3>First page</h3>
</div>
<div data-role="content">
<a data-role="button" id="some-btn" href="second.html" rel="external">Open next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#second', function(){
alert('This is a second page!');
});
</script>
</head>
<body>
<div data-role="page" id="second" data-theme="b">
<div data-role="header" data-theme="a">
<h3>Second page</h3>
</div>
<div data-role="content">
This is a second page
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Post a Comment for "How To Bind The Event "pageshow" For An External Html File With Jquery Mobile"