Javascript $.mobile.changePage()登录后不工作
我正在构建一个WebWorks应用程序,它以一个登录表单开始,如果登录成功,应该会显示id='map'的第二个页面。我尝试使用$.mobile.changePage显示页面,但它只重新加载登录页面。为什么不载入第二页 我剥离了所有登录验证代码以简化工作,这样我就可以找出changePage不起作用的原因Javascript $.mobile.changePage()登录后不工作,javascript,html,jquery-mobile,Javascript,Html,Jquery Mobile,我正在构建一个WebWorks应用程序,它以一个登录表单开始,如果登录成功,应该会显示id='map'的第二个页面。我尝试使用$.mobile.changePage显示页面,但它只重新加载登录页面。为什么不载入第二页 我剥离了所有登录验证代码以简化工作,这样我就可以找出changePage不起作用的原因 <!DOCTYPE html> <html> <head> <title>My Page</title> <link rel="
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<link rel="stylesheet" href="lib/BlackBerry-JQM-all-1.0.0.css" />
<script src="lib/BlackBerry-JQM-all-1.0.0.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHGb5Si_2oXtOLCo_IzRIJPtrKkhyFPsU&sensor=false"></script>
</head>
<body>
<div data-role="page" id="login">
<div data-role="header">
<h1>TCOB - Login</h1>
</div>
<!-- /header -->
<div data-role="content">
<div class="BB10Container">
<form method="post">
<label for="username">Username</label>
<input type="text" name="user-input" id="username" placeholder="Username"/>
<label for="basic">Password</label>
<input type="password" name="pass-input" id="password" placeholder="Password"/>
<input type="submit" data-role="button" data-inline="true" data-icon="check" value="Submit" id="submit">
</form>
</div>
</div>
<!-- /content -->
<div data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="map" >
<div data-role="header">
<h1>TCoB</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</div>
<script>
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.backBtnText = "Zurück";
});
$('#username').keyup(function(){
$.get("http://www.hedonsoft.com/tcob/php/check_user.php",{username: $("#username").val()},function(data){
if(data == true){
$('#username').css("background-color","#00FFFF").css("color","#000000");
}else{
$('#username').css("background-color","#000000").css("color","#FFFFFF");
}
});
});
$('#submit').click(function(){
$.mobile.changePage("#map");
});
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
function getLocation(){
}
</script>
</body>
</html>
我的页面
TCOB-登录
用户名
密码
TCoB
$(document).bind(“mobileinit”,function(){
$.mobile.page.prototype.options.backBtnText=“Zurü;ck”;
});
$('#username').keyup(函数(){
$.get(”http://www.hedonsoft.com/tcob/php/check_user.php“,{username:$(“#username”).val()},函数(数据){
如果(数据==true){
$('#username').css(“背景色”,即“#00FFFF”).css(“颜色”,即“#000000”);
}否则{
$('#username').css(“背景色”,“000000”).css(“颜色”,“FFFFFF”);
}
});
});
$(“#提交”)。单击(函数(){
$.mobile.changePage(“地图”);
});
函数初始化(){
变量映射选项={
缩放:8,
中心:新google.maps.LatLng(-34.397150.644),
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map(document.getElementById(“map”)、mapOptions);
}
函数getLocation(){
}
问题在于,您都在使用自定义的单击处理程序和
提交表单
自定义单击处理程序将导航到#map
并且您实际上可以看到该页面快速闪烁,但是由于您的form
没有action
属性,它将重定向到同一页——即登录页面,导致第二次导航,从而导致您正在经历的奇怪行为
查看不带表单的情况
,查看它是否有效
但是,请注意,$.mobile.changePage
是从1.4.0 RC1开始的。$.mobile.navigate()似乎是我要找的,而不是changePage();是这样吗?1)mobileinit
应该在加载jQuery之后和jQuery Mobile之前启动。2) 如果您使用的是最新的jQM RC$.mobile.toolbar.prototype.options.backBtnText
并更改页面$.mobile.pageContainer.pageContainer(“更改”、“URL/#页面”)代码>。