それぞれに JQM ページを含む 2 つの html ページがあります。Page1 から Page2 に移動し ( $.mobile.changePageをreloadPage=trueで使用した例のボタンをクリックして)、Page1 に戻ってから、txt1 テキストボックス (pageshow イベント内) に値を割り当てても機能しません -テキストボックスは空白のままです。ただし、2 回目の旅行(つまり、ページ 1 -> ページ 2 -> ボタン クリックを使用したページ 1) では機能します。コード例は次のとおりです。
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"/>
</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');
});
});
$('body').off('pageshow', "#page_1").on('pageshow', "#page_1", function () {
alert('Page-1 SHOW');
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="b">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 });
});
});
$('body').off('pageshow', "#page_2").on('pageshow', "#page_2", function () {
alert('Page-2 SHOW');
var myDate = new Date();
$("#txt2").val(myDate);
});
</script>
</div>
</body>
</html>
Page1 の pageshow イベント内で $("#txt1").val(myDate) を使用して、入力要素 txt1 に値を割り当てようとしていることに注意してください。テキストボックスは空白のままですが、そのテキストボックスから値を読み取ってアラートに表示すると、アラートボックスに値が表示されます。どうにかして UI を更新する必要がありますか、またはその要素にアクセスするために間違ったイベントを使用していますか?
さらなる調査:
後で、1 つの追加ページ (index.htm) を使用して、Page1、Page2、および往復に移動してみました。したがって、index.htm->Page1.htm->Page2.htm->Page1.htm で、今回は問題ありません。したがって、HTTP を介してロードされた最初のページに問題があることを意味します。後続のページは AJAX (reloadPage=true の $.mobile.changePage) を使用して読み込まれるため、正常に動作します。これは JQM のバグだと言わざるを得ません。これには何か作業がありますか？
これが私のインデックスページです：
index.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) {
//alert('Page-1 SHOW - ' + $("#txt1").length);
$("#txt1").val('');
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>