単一ページのアプリケーション、クエリモバイルをロードされた後、ページ遷移を行う方法1.4.5 & jQueryのv1.11.1のjQuery Mobileは：ページが完全にDOMに
は、このことが可能であることをページ1 URLをクリックした後、それ私のページ1あなたはabsolu場合
<div data-role="page" id="menu">
Menu
<a href="#page1" data-transition="slide">Page 1</a></br>
<a href="#page2" data-transition="slide">Page 2</a></br>
</div>
<div data-role="page" id="page1">
...some text.
<div id="articles_list">
some data from ajax...
</div>
</div>
をロードするためにいくつかの時間を要求するいくつかのAJAXを持っているので、それはロード後にDOMにフルロードするためのページ1まで待つ必要があり、ページ遷移が
が起こったはずですデータが完全にロードされるまで待つ必要があります。コードでナビゲートすることができます。アンカーの代わりにボタンを使用するだけです。
以下の例では、2つのajaxリクエストを連鎖してアルバムの単純なリストを作成しています。首尾よく検索した後、リストがソートされ、ページのコンテンツが作り直される：
function gotoPage1() {
$.ajax({
url: "https://jsonplaceholder.typicode.com/users",
method: 'GET',
crossDomain: true,
dataType: "jsonp",
beforeSend: function() {
$.mobile.loading("show");
}
}).then(function(users) {
$.ajax({
url: "https://jsonplaceholder.typicode.com/albums",
method: 'GET',
crossDomain: true,
dataType: "jsonp",
success: function(albums) {
$("#articles_list").empty();
$.each(albums, function(index, album) {
album.userName = $.grep(users, function(user, index) {
return (user.id == album.userId);
})[0].name;
});
albums.sort(function(a, b) {
return a.userName.localeCompare(b.userName);
});
$.each(albums, function(index, album) {
$("#articles_list").append("<li>"+album.userName+"<p><strong>"+album.title+"</strong></p></li>");
});
$("#articles_list").listview({
autodividers: true,
inset: true
}).listview("refresh");
},
complete: function() {
$.mobile.loading("hide");
$(":mobile-pagecontainer").pagecontainer("change", "#page1", {transition: "slide"});
}
});
});
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="menu">
<div data-role="header" data-position="fixed">
<h3>Menu</h3>
</div>
<div data-role="content">
<button class="ui-btn ui-corner-all" onclick="gotoPage1();">Page 1</button>
<a href="#page2" data-transition="slide" class="ui-btn ui-corner-all">Page 2</a>
</div>
</div>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
<a href="#" data-rel="back" class="ui-btn-left">Back</a>
<h3>...some text.</h3>
</div>
<div data-role="content">
<ul id="articles_list">
</ul>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed">
<a href="#" data-rel="back" class="ui-btn-left">Back</a>
<h3>...some text.</h3>
</div>
<div>
some other data from ajax...
</div>
</div>
</body>
</html>コードありがとうございます。それは働いている – pankaj
どうしても必要な場合は、その使用の代わりに、アンカーのボタン（または無効HREF付きアンカー）コードで＆変更ページ完了したajaxでしかし、なぜそれが必要なのでしょうか？ – deblocker
ページ1のURLをクリックすると、1ページ目が表示されます。一番上のテキストと残りの一番下のページには、ajaxがある場所が空白になっています（ロードには時間がかかります）。だから私はAJAXが完全にロードされた後にページをロードする必要があります。 – pankaj
ブロッキングアクションは面倒です...ここで私の提案：1）メニューエントリをクリックしてページがすぐに移行している場合、IMHOの方がユーザーエクスペリエンスが優れています。 2）次に、あなたのpage1はローダースピナーを表示していて、リスト項目が読み込まれる直前であることを伝えます。 3）データが到着した後、スピナーを閉じ、 'refresh'と' updatelayout'を呼び出して、JQMにリストとページの内容をきちんと改訂するよう指示します。 – deblocker