0
我正在使用jQuery Mobile 1.3.1和Ajax構建照片庫頁面以從JSON格式的PHP服務器中檢索照片。當我第一次導航到該頁面時，#album_loader div顯示在#album_message div中沒有任何內容（是，本地存儲變量已填充）。根據我的代碼，#album_mesage div應該包含內容，並且#album_loader div只應在發送Ajax請求時顯示。我知道jQM有一些棘手的方法，每次瀏覽頁面時都會渲染，但這種方法適用於其他頁面。有任何想法嗎？下面是我的代碼：jQuery Mobile頁面呈現不正確，除非刷新
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wedding</title>
<link href="css/jquery-mobile.css" rel="stylesheet" />
<link href="css/application.css" rel="stylesheet" />
<script src="js/jquery.js"></script>
<script src="js/global.js"></script>
<script src="js/jquery-mobile.js"></script>
<script src="phonegap.js"></script>
<script src="js/connection.js"></script>
</head>
<body>
<div data-role="page" id="album">
<div id="header" data-role="header"><p align="center">Wedding</p></div>
<div id="content" data-role="content">
<div id="album_message" class="message" style="margin-bottom:20px;"></div>
<div id="album_loader" class="message"><p align="center"><strong>Please Wait, Loading Album Data...</strong><br /><img src="images/loading.gif" /></p></div>
<div id="album_photos"></div>
</div>
<div id="footer" data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home">Home</a></li>
<li><a href="instructions.html" data-icon="info">Instructions</a></li>
</ul>
</nav>
</div>
</div>
<script scr="js/fancybox.js"></script>
<script>
$(document).on('pagebeforeshow', '#album', function() {
$('#album_loader').hide();
var album_id = localStorage.getItem('album_id');
var album_title = localStorage.getItem('album_title');
var album_bride = localStorage.getItem('album_bride');
var album_groom = localStorage.getItem('album_groom');
var album_user = localStorage.getItem('album_user');
$('#album_message').html('<p align="center"><strong>Album:</strong> ' + album_title + ' <br /><strong>By:</strong> ' + album_bride + ' & ' + album_groom + '</p>');
$.ajax({
url: server_url + "get-photos",
type: "post",
data: 'album_id=' + album_id,
dataType: 'json',
crossDomain: true,
beforeSend : function(){
$('#album_loader').show();
},
error: function() {
$("#album_loader").hide();
$('#album_message').removeClass("message").html('<p align="center">Server communication error while trying to retrieve album photos.</p>').addClass("errorm");
},
success: function(data) {
$("#album_loader").hide();
if (data.response === "true") {
$("#album_photos").append('<div id="grid" class="ui-grid-b"></div>');
var photos = data.photos.length;
$.each(data.photos, function(i, object) {
$("#grid").append('<div class="ui-block-b"><img src="' + photo_url + album_user + '/thumbnail/' + object.photo_thumbnail + '" class="img-border" /></div>');
});
} else {
$('#album_message').removeClass("message").html('<p align="center">Error retrieving photos.</p>').addClass("errorm");
}
}
});
});
</script>
</body>
</html>
而且，刷新圖像也終於露出後，當我瀏覽離開該頁面，然後返回到它的圖像顯示的兩倍。這是爲什麼？是因爲我追加到div嗎？我將如何解決這個問題？
對於重複的圖像，使用'$（ '＃album_photos'）空（）;'插入新的圖像前。嘗試'pageshow'來檢查它們是否可見而不刷新。 – Omar
。empty（）修正了追加的問題，我將pagebeforeshow切換到了頁面展示，但我仍然得到相同的行爲。當我第一次進入頁面時，#album_message div是空的，並顯示#album_loader div。 – WebDev84
嗯，嘗試'$（'[數據角色=內容]'）。觸發（'pagecreate'）'或'updatelayout'，一旦你完成插入照片。 – Omar