DOM elements don't get refreshed in pageinit/pageshow event after navigating using $.mobile.changePage with reloadPage=true
I have got two html pages each containing JQM page. If I move from Page1 to Page2 (by clicking the button in the example using
$.mobile.changePage with
reloadPage=true) and then move back to Page1 then assigning any value to txt1 textbox (inside the pageshow event) doesn't work - textbox remains BLANK. However in the
second trip (i.e. Page1->Page2->Page1 using button click) it works. Code example is here:
Page1.htm
<!DOCTYPE>
<html>
<head>
<title>Page-1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1" data-theme="a" data-url="/JqmSimpleApp/Page1.htm">
<div data-role="header" class="header_bar">
Page-1 Header
</div>
<div data-role="content" class="investor-centre">
Page-1 CONTENT
<br/>
<a id="btnMoveToPage2" href="#" data-role="button" data-inline="true" data-theme="b">Move to Page-2</a>
<input type="text" id="txt1"/>
<a id="btnShow" href="#" data-role="button" data-inline="true" data-theme="b">Show</a>
</div>
<div data-role="footer" data-theme="c" data-position="fixed">
Page-1 Footer
</div>
<!--################### Page specific Script Section ############################# -->
<!--NOTE: The reason it's been put under the data-role="page" section is that when a page is been loaded using Ajax call JQM only loads the content within data-role="page" section. -->
<script type="text/javascript">
$('body').off('pageinit', "#page_1").on('pageinit', "#page_1", function () {
//alert('Page-1 INIT');
$("body").off("click", "#btnMoveToPage2").on("click", "#btnMoveToPage2", function () {
$.mobile.changePage("Page2.htm", { reloadPage: true });
});
$("body").off("click", "#btnShow").on("click", "#btnShow", function () {
var myDate = new Date();
$("#txt1").val(myDate);
alert('Clicked');
});
});
$(document).off('pageshow', '#page_1').on('pageshow', "#page_1", function (event) {
var myDate = new Date();
$("#txt1").val(myDate); //*** PROBLEM HERE - Doesn't show any value in the 1st round trip.****\\\
alert('txt1 value: ' + $("#txt1").val()); // STRANGE!! When I read from txt1 text box it ALWAYS shows value
});
</script>
</div>
</body>
</html>
Page2.htm
<!DOCTYPE>
<html>
<head>
<title>Page-2</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page_2" data-theme="c" data-url="/JqmSimpleApp/Page2.htm">
<div data-role="header" class="header_bar">
Page-2 Header
</div>
<div data-role="content" class="investor-centre">
Page-2 CONTENT
<br/>
<a id="btnMoveToPage1" href="#" data-role="button" data-inline="true" data-theme="e">Move to Page-1</a>
<input type="text" id="txt2"/>
</div>
<div data-role="footer" data-theme="c" data-position="fixed">
Page-2 Footer
</div>
<!--################### Page specific Script Section ############################# -->
<!--NOTE: The reason it's been put under the data-role="page" section is that when a page is been loaded using Ajax call JQM only loads the content within data-role="page" section. -->
<script type="text/javascript">
$('body').off('pageinit', "#page_2").on('pageinit', "#page_2", function () {
//alert('Page-2 INIT');
$("body").off("click", "#btnMoveToPage1").on("click", "#btnMoveToPage1", function () {
$.mobile.changePage("Page1.htm", { reloadPage: true });
});
});
$(document).off('pageshow', '#page_2').on('pageshow', '#page_2', function () { //alert('Page-2 SHOW - ' + $("#txt2").length);
var myDate = new Date();
$("#txt2").val(myDate);
});
</script>
</div>
</body>
</html>
Note that I'm trying to assign a value to an input element txt1 using $("#txt1").val(myDate) inside pageshow event in Page1. Textbox remains blank,
however if I read value from that textbox and display in an alert I can see the value in the alert box. Do I have to refresh the UI somehow or am I using wrong event to access that element?
Further investigation:
Later on I have tried with one addition page (index.htm) from where I move to Page1 then Page2 and then round trip. So index.htm->Page1.htm->Page2.htm->Page1.htm and this time NO PROBLEM. So it means the problem with the very first page loaded through HTTP. As the subsequent pages being loaded using AJAX ($.mobile.changePage with reloadPage=true) they work fine. I have to say this is a
bug in JQM. Is there any work aound for this?
Here is my index.htm page:
<!DOCTYPE>
<html>
<head>
<title>Page-1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" data-url="/JqmSimpleApp/index.htm">
<div data-role="header" class="header_bar">
index Header
</div>
<div data-role="content" class="investor-centre">
index CONTENT
<br/>
<a id="btnMoveToPage1i" href="#" data-role="button" data-inline="true" data-theme="b">Move to Page-1</a>
</div>
<div data-role="footer" data-theme="c" data-position="fixed">
Page-1 Footer
</div>
<!--################### Page specific Script Section ############################# -->
<!--NOTE: The reason it's been put under the data-role="page" section is that when a page is been loaded using Ajax call JQM only loads the content within data-role="page" section. -->
<script type="text/javascript">
$('body').off('pageinit', "#index").on('pageinit', "#index", function () {
//alert('Index INIT');
$("body").off("click", "#btnMoveToPage1i").on("click", "#btnMoveToPage1i", function () {
$.mobile.changePage("Page1.htm", { reloadPage: true });
});
});
</script>
</div>
</body>
</html>