如果用户登录并连接到相册，我正在尝试让我的 jQuery Mobile 应用程序显示有关相册的信息。我正在使用 $.ajax 发布到我的服务器并获取数据。当应用程序打开时，主页上会显示正确的数据，但是当我导航到应该显示它的另一个页面时，div 是空的，即使我知道正在检索数据。这几乎就像 div 没有被正确注入。下面是我的主页，也是上传页面。
主页：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wedding Connect</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/application.js">script> -->
<script src="js/jquery-mobile.js"></script>
<script src="js/cordova.js"></script>
</head>
<body>
<div data-role="page" id="home" data-title="Home" data-add-back-btn="true" data-back-btn-text="Back">
<!-- header -->
<div id="header" data-role="header"><p align="center">Welcome to Wedding Connect</p></div>
<!-- /header -->
<!-- content -->
<div id="content" data-role="content">
<div id="album-info"></div>
<nav>
<ul data-role="listview" data-inset="true" data-theme="c">
<li><a href="login.html" data-transition="slide">Enter Album Code</a></li>
<li><a href="upload.html" data-transition="slide">Upload a Photo</a></li>
<li><a href="instructions.html" data-transition="slide">Instructions</a></li>
</ul>
</nav>
</div>
<!-- /content -->
<!-- footer -->
<div id="footer" data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="home.html" data-transition="slide" data-icon="home" data-theme="b">Home</a></li>
<li><a href="upload.html" data-transition="slide" data-icon="plus" data-theme="b">Upload Photo</a></li>
<li><a href="update.html" data-transition="slide" data-icon="gear" data-theme="b">New Album</a></li>
<li><a href="instructions.html" data-transition="slide" data-icon="info" data-theme="b">Instructions</a></li>
</ul>
</nav>
</div>
<!-- /footer -->
<script>
$("#home").on('pageshow', function () {
// For testing purposes only
localStorage.setItem('album_code', '1234');
var album_code = localStorage.getItem('album_code');
if (album_code !== null) {
// Attempt to authenticate the album code
$.ajax({
url: "http://localhost/weddingconnect/index.php/mobile/verify",
type: "post",
data: {album_code: album_code},
dataType: 'json',
crossDomain: true,
error:function() {
alert('Server communication error. Could not validate stored album code.');
},
success: function(data) {
if (data.response == "TRUE") {
// Retrieve album information
$.ajax({
url: "http://localhost/weddingconnect/index.php/mobile/get-album",
type: "post",
data: {album_code: album_code},
dataType: 'json',
crossDomain: true,
error: function() {
alert('Server communication error. Could not retrieve album information.');
},
success: function(data) {
if (data.response == "TRUE") {
$('#album-info').html(
'<p align="center"><strong>Album:</strong> ' +
data.album + ' <strong>By:</strong> ' +
data.bride + ' & ' +
data.groom + '</p>'
);
} else {
$('#album-info').html('<p align="center">Error retrieving album information.</p>');
}
}
});
} else {
localStorage.removeItem('album_code');
$('#album-info').html('<p align="center">You are not connected to an album at this time.</p>');
}
}
});
}
});
</script>
</div>
</body>
</html>
上传页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wedding Connect</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/application.js">script> -->
<script src="js/jquery-mobile.js"></script>
<script src="js/cordova.js"></script>
</head>
<body>
<div data-role="page" id="upload" data-title="Upload" data-add-back-btn="true" data-back-btn-text="Back">
<div data-role="header"><p align="center">Welcome to Wedding Connect</p></div>
<div data-role="content">
<div id="album-info"></div>
<script src="js/upload.js"></script>
<input type="hidden" id="serverUrl" value="http://localhost/weddingconnect/mobile/upload" />
<input type="button" onclick="capturePhoto();" value="Take Picture" />
<input type="button" onclick="getPhoto(pictureSource.PHOTOLIBRARY);" value="Select Picture" />
<input type="button" onclick="uploadPhoto();" value="Upload" data-theme="b" />
<img id="smallImage" src="" />
<img id="largeImage" src="" />
</div>
<div id="footer" data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li><a href="home.html" data-transition="slide" data-icon="home" data-theme="b">Home</a></li>
<li><a href="upload.html" data-transition="slide" data-icon="plus" data-theme="b">Upload Photo</a></li>
<li><a href="update.html" data-transition="slide" data-icon="gear" data-theme="b">New Album</a></li>
<li><a href="instructions.html" data-transition="slide" data-icon="info" data-theme="b">Instructions</a></li>
</ul>
</nav>
</div>
<script>
$("#upload").on("pageshow", function() {
//alert('upload');
var album_code = localStorage.getItem('album_code');
//alert(album_code);
// If no album code is present send the user to the login page
if (album_code === null) {
$.mobile.changePage("login.html", {
transition: "slide"
});
}
// Retrieve the album information
$.ajax({
url: "http://localhost/weddingconnect/index.php/mobile/get-album",
type: "post",
data: {album_code: album_code},
dataType: 'json',
crossDomain: true,
error:function() {
alert('Server communication error. Could not retrieve album information.');
},
success: function(data) {
if (data.response == "TRUE") {
alert(data.groom);
$('#album-info').html(
'<p align="center"><strong>Album:</strong> ' +
data.album + ' <strong>By:</strong> ' +
data.bride + ' & ' +
data.groom + '</p>'
);
} else {
$('#album-info').html('<p align="center">Error retrieving album information.</p>');
}
}
});
});
</script>
</div>
</body>
</html>
我觉得我错过了一些简单的事情。我知道您不能将 $(document).ready(function(){ 与 jQM 一起使用，因此我对每个页面都使用 pagebeforeshow。如何在每次显示页面时正确显示它？提前致谢。