私は深刻な頭痛に悩まされています.最後の数時間、ページ間をフリックすると(ajaxによって動的に読み込まれる)、スタイリングがすべて行われる理由がわかりません.
私はこれについてネット上の何十もの投稿を読み、 .page() trigger("Refresh") trigger create などを試しました。
ページ 1 にはリストがあり、アイテムをクリックすると、別のリストの完全なコンテンツが取得され、それらが DOM に配置されます。
JQuery バージョン (モバイル 1.1rc2 - ただし、1.0.1 安定版と同じ問題):
<script src="scripts/ajax.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
このリンクは最初のリストでクリックされます:
javascript:GetGarageList("G9236")
トリガー：
// show garages for factor
function GetGarageList(accNo) {
$.mobile.showPageLoadingMsg("b", "Loading", false);
$.ajax({
type: "POST",
url: "Default.aspx/GetGarageList",
data: "{'accNo':'" + accNo + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
$("#garageList").html(msg.d);
$.mobile.changePage("#garageList");
},
error: function () {
ShowError("Error :(");
},
complete: function () {
$.mobile.hidePageLoadingMsg();
}
});
};
最初の読み込みでは、2 ページ目が完璧に見えます。
しかし、戻るボタンを上に押すと。次に、別のリンクをクリックします。
javascript:GetGarageList("G9336")
ビューがめちゃくちゃになります：
助けてください！
編集 ：
他の人は .trigger("create"); を使用しています。彼らが問題を解決したと言う...しかし、私はそれを私のコードに次のように追加するたびに:
$("#garageList").html(msg.d).trigger("create");
また
$("#garageList").html(msg.d);
$("#garageList").trigger("create");
それは私にロードスピナーを永遠に与えるだけです。
編集2：
以下のバーンズの提案に従って、html を次のように変更しました。
<%--Garage List--%>
<div data-role="page" id="garageList" data-add-back-btn="true" data-theme="a">
<div data-role='header' data-position='fixed'>
<h1>Garages</h1>
<a href='index.html' data-icon='plus' data-iconpos='notext' class='ui-btn-right' data-theme='b'></a>
</div>
<div data-role='content' id="abc">
<ul data-role='listview' id='xyz' data-filter='true' data-filter-theme='a' data-filter-placeholder='search name or account no...' data-split-icon='info' data-split-theme='a'>
/// --> new content goes here... as simply many <li> items.
</ul>
</div> <!-- /content -->
</div> <!-- /page -->
それから私は（ajaxの成功で）試しました：
$("#xyz").empty();
$("#xyz").html(msg.d);
$("#abc").listview("refresh");
$.mobile.changePage("#garageList");
と
$("#xyz").html(msg.d);
$("#xyz").listview("refresh");
$.mobile.changePage("#garageList");
HERE は msg.d のサンプル出力です:
"<li><a href='javascript:GetGarageDetails(16267)'><h3>A KETCHEN MOTOR ENGINEERS</h3><p><strong>MID LOTHIAN</strong></p></a><a href="javascript:GetFactorDetails('16267')"></a></li>
<li><a href='javascript:GetGarageDetails(16328)'><h3>G.A.AUTOS</h3><p><strong></strong></p></a><a href="javascript:GetFactorDetails('16328')"></a></li>
<li><a href='javascript:GetGarageDetails(16262)'><h3>GARRY HENDERSON MOTOR ENGINEERS</h3><p><strong>WEST LIMTON</strong></p></a><a href="javascript:GetFactorDetails('16262')"></a></li>
<li><a href='javascript:GetGarageDetails(16264)'><h3>LEADBURN GARAGE LTD</h3><p><strong>PEELBLESHIRE</strong></p></a><a href="javascript:GetFactorDetails('16264')"></a></li>
<li><a href='javascript:GetGarageDetails(16315)'><h3>LOTHIAN MOTORS</h3><p><strong></strong></p></a><a href="javascript:GetFactorDetails('16315')"></a></li>
"
および他のバリエーションですが、それでも再生したくありません（リフレッシュ時にスピナーが永遠に続きます）...少し改善されましたが（リフレッシュを外すと）：
