I am facing an issue with the execution of the pagebeforeshow command in my webapp. I have built a webapp consisting of three html5 pages (page1, page2, and page3.html) with similar structures.
page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
<title></title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" type="text/css">
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/app.js"></script>
<style type="text/css">
body {
width:100%;
}
#mainBtn, #helpBtn, #backBtn {
width:50px;
height:10px;
padding:2px 10px 10px 10px;
color:#FFF;
}
#contentBox {
width:80%;
height:500px;
margin:15px auto;
}
#page1 #contentBox {
background-color:aqua;
}
#page2 #contentBox {
background-color:yellow;
}
#page3 #contentBox {
background-color:grey;
}
</style>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-theme="b">
<a id="mainBtn" href="page2.html" data-transition="slide" data-inline="true"></a>
<h3>page 1</h3>
<a id="helpBtn" href="page3.html" data-transition="slide" data-inline="true"></a>
</div><!-- /header -->
<div data-role="content">
<div id="contentBox">
Some Content Here
</div>
</div><!-- /content -->
<script type="text/javascript">
$(document).on('pagebeforeshow', '#page1', function() {
addBtnText();
});
</script>
</div><!-- /page -->
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
</head>
<body>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-theme="b">
<a id="backBtn" href="page1.html" data-transition="slide" data-direction="reverse"></a>
<h3>page 2</h3>
<a id="helpBtn" href="page3.html" data-transition="slide" data-inline="true"></a>
</div><!-- /header -->
<div data-role="content">
<div id="contentBox">
Some Content Here
</div>
</div><!-- /content -->
<script type="text/javascript">
$(document).on('pagebeforeshow', '#page2', function() {
addBtnText();
});
</script>
</div><!-- /page -->
</body>
</html>
Page3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
</head>
<body>
<div data-role="page" id="page3">
<div data-role="header" data-position="fixed" data-id="etHdr" data-theme="b">
<a id="backBtn" href="page1.html" data-transition="slide" data-direction="reverse"></a>
<h3>page 3</h3>
<a id="mainBtn" href="page2.html" data-transition="slide" data-direction="reverse"></a>
</div><!-- /header -->
<div data-role="content">
<div id="contentBox">
Some Content Here
</div>
</div><!-- /content -->
<script type="text/javascript">
$(document).on('pagebeforeshow', '#page3', function() {
addBtnText();
});
</script>
</div><!-- /page -->
</body>
</html>
Moreover, I have an app.js file that includes the addBtnText() function.
App.js
function addBtnText() {
// Update button text
$("#backBtn").html('back');
$("#mainBtn").html('main');
$("#helpBtn").html('help');
}
In theory, the expectation is to run the addBtnText function before each page loads to add text labels to buttons. The function works correctly on page1, partially on page2 (loads back button text only), and doesn't work at all on page3 (no back or main button text).
This inconsistent behavior has left me puzzled as to why it works fine on page 1 but not on page 2 and entirely fails on page 3.
Is there something crucial missing in the splitting of the pages and calling of functions?
Thank you for your assistance!