在登录页面（index.php）调用changePage之后，我遇到导航栏无法在目标页面（login.php）上运行的问题。
我有3个文件
这是index.php：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scal=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<div id="page" data-role="page">
<div id="header" data-role="header">
<h1>
Carpooling
</h1>
</div>
<div id="content" data-role="content">
<form>
<div id="loginForm">
<h2>
Login
</h2>
<div id="usernameDiv" data-role="field-contain">
<input type="text" name="username" placeholder="Username" id="username" />
</div>
<div id="passwordDiv" data-role="field-contain">
<input type="password" name="password" placeholder="Password" id="password" />
</div>
<div id="loginButtonDiv" data-role="field-contain">
<button name="login" type="submit" data-inline="true">
Login
</button>
</div>
</div>
</form>
</div>
<div id="footer" data-role="footer">
<h1>
Copyright © Björn Karpenstein
</h1>
</div>
</div>
</body>
</html>
这是login.js：
$(function() {
$('form').submit(function(){
if(validateUsername() && validatePassword())
{
$.post("services/auth.php", $('form').serialize(), function(response) {
if (response == 'true')
{
showSuccess('You will be redirected in a moment!');
setTimeout(function(){
$.mobile.changePage('login.php', {transition: "slide", reloadPage: true, changeHash: false});
}, 2000);
}
else
{
showError(response);
}
});
}
function validateUsername() {
if($('#username').val().length === 0)
{
showError('The Username can not be empty!');
return false;
}
else
{
return true;
}
return false;
}
function validatePassword() {
if($('#password').val().length === 0)
{
showError('The Password can not be empty!');
return false;
}
else
{
return true;
}
return false;
}
function showSuccess(message){
$('<div class="ui-loader ui-overlay-shadow ui_body_success ui-corner-all"><h1>'+message+'</h1></div>').css({ "display": "block", "opacity": 0.96, top: $(window).scrollTop() + 100 })
.appendTo( $.mobile.pageContainer )
.delay( 2000 )
.fadeOut( 400, function(){
$(this).remove();
});
}
function showError(message){
$('<div class="ui-loader ui-overlay-shadow ui_body_error ui-corner-all"><h1>'+message+'</h1></div>').css({ "display": "block", "opacity": 0.96, top: $(window).scrollTop() + 100 })
.appendTo( $.mobile.pageContainer )
.delay( 2000 )
.fadeOut( 400, function(){
$(this).remove();
});
}
return false;
});
});
这是login.php：
<?php
// ob_start();
include_once('../services/session.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Ohne den viewort ist es wie ne Desktopanwendung -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</head>
<body>
<div id="page" data-role="page">
<div id="header" data-role="header">
<h1>
Fahrtenliste
</h1>
</div>
<div id="content" data-role="content">
<p>
This is index
</p>
</div>
<div id="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="login.php" data-icon="grid">List rides</a></li>
<li><a href="login.php#add_ride" data-icon="plus" data-rel="dialog">Add ride</a></li>
<li><a href="login.php#list_users" data-icon="grid">List users</a></li>
<li><a href="login.php#add_user" data-icon="plus">Add user</a></li>
</ul>
</div>
</div>
</div>
<div id="add_ride" data-role="dialog">
<div id="header" data-role="header">
<h1>
Add ride
</h1>
</div>
<div id="content" data-role="content">
<div id="rideForm">
<label for="fahrtUserName">Ride creator <?php echo $_SESSION['user_email']; ?></label>
<div id="fahrtUserName" data-role="field_contain">
<input type="text" name="fahrt_username" value="<?php
echo $_SESSION['user_email']." <-> ";
if(!isset($_SESSION['user_email']))
{
echo "Die session hatja nix";
}
?>" readonly="readonly" id="fahrt_username" />
</div>
</div>
</div>
</div>
<div id="list_users" data-role="page">
<div id="header" data-role="header">
<h1>
List users
</h1>
</div>
<div id="content" data-role="content">
<p>
List users
</p>
</div>
<div id="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="login.php" data-icon="grid">List rides</a></li>
<li><a href="login.php#add_ride" data-icon="plus">Add ride</a></li>
<li><a href="login.php#list_users" data-icon="grid">List users</a></li>
<li><a href="login.php#add_user" data-icon="plus">Add user</a></li>
</ul>
</div>
</div>
</div>
<div id="add_user" data-role="page">
<div id="header" data-role="header">
<h1>
Add user
</h1>
</div>
<div id="content" data-role="content">
<p>
Add user
</p>
</div>
<div id="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="login.php" data-icon="grid">List rides</a></li>
<li><a href="login.php#add_ride" data-icon="plus">Add ride</a></li>
<li><a href="login.php#list_users" data-icon="grid">List users</a></li>
<li><a href="login.php#add_user" data-icon="plus">Add user</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
当我在一个目标站点中使用多个页面时，我无法使用changePage。
我做的是我改变了
setTimeout(function(){
$.mobile.changePage('login.php', {transition: "slide", reloadPage: true, changeHash: false});
}, 2000);
到
setTimeout(function(){
// $.mobile.changePage('login.php', {transition: "slide", reloadPage: true, changeHash: false});
window.location='login.php';
}, 2000);