ChangePage (jQuery Mobile) doesn't work
this is the first page : index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../test/style.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<script>
$(document).ready(function(){
$('#chercher').focus(function(){
if ($('#chercher').val()=='(Code postale, Ville, Département ...)')
$('#chercher').val("");
});
$('#chercher').blur(function(){
if ($('#chercher').val()=='')
$('#chercher').val("(Code postale, Ville, Département ...)");
});
});
$('#page').live('pagecreate',function(event){
$("#login").bind("click", function(event) {
$.mobile.changePage( "conexion.html", { transition: "flip"} );
});
});`
</script>
<body>
<div data-role="page" id="page">
<div data-role="header" data-theme="a"><h1>Welcome</h1>
<div data-role="navbar">
<ul>
<li><a href="#">Coupons</a></li>
<li><a href="#">Bon plan</a></li>
<li><input type="button" value="connect" id="login" data-theme="a"/></li>
</ul>
</div><!-- /navbar -->
</div>
<div data-role="content" data-theme="c">
<div>
<input type="text" id="chercher" value="(Code postale, Ville, Département ...)">
</div>
<ul data-role="listview" data-inset="true" data-dividertheme="b" data-count-theme="b">
<li data-role="list-divider" >Choisissez une des catégories</li>
<li><a href="index.php"><img src="images/tout.png" class="ui-li-icon" alt="tout" width="30" height="25"> Tout <span class="ui-li-count">24</span></a></li>
<li><a href="index.php"><img src="images/restauration.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> Restauration</a><span class="ui-li-count">2</span></li>
<li><a href="index.php"><img src="images/loisir.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> Loisirs</a><span class="ui-li-count">156</span></li>
<li><a href="index.php"><img src="images/beaute.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> Beauté,santé <span class="ui-li-count">24</span></a></li>
<li><a href="index.php"><img src="images/mode.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> Mode</a><span class="ui-li-count">13</span></li>
<li><a href="index.php"><img src="images/maison.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> &a开发者_运维知识库mp;nbsp; Maison, Jardin</a><span class="ui-li-count">16</span></li>
<li><a href="index.php"><img src="images/service.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> Services</a><span class="ui-li-count">2</span></li>
<li><a href="index.php"><img src="images/nationnal.PNG" class="ui-li-icon" alt="tout" width="30" height="25"> Nationnal</a><span class="ui-li-count">0</span></li>
</ul>
</div>
<div data-role="footer" data-theme="a" class="ui-footer"><h1>Pied de page</h1></div>
</div>
<div id="page2" data-role="page">
</div>
</body>
</html>
My second page is named : conexion.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<body>
<script>
function onSuccess(data, status)
{
data = $.trim(data);
$("#notification").text(data);
}
function onError(data, status)
{
$("#notification").text(data);
}
$(document).ready(function() {
$("#submit").click(function(){
var formData = $("#callAjaxForm").serialize();
$.ajax({
type: "POST",
url: "conexion.php",
cache: false,
data: formData,
success: onSuccess,
error: onError
});
return false;
});
});
</script>
<!-- call ajax page -->
<div data-role="page" id="callAjaxPage">
<div data-role="header">
<h1>Connexion</h1>
<a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home" data-url="/">Home</a>
</div>
<div data-role="content">
<div data-role="collapsible" data-collapsed="false">
<h3>Sign in</h3>
<form id="callAjaxForm">
<div data-role="fieldcontain">
<label for="email">Email</label>
<input type="text" name="email" id="email" />
<label for="password">Password</label>
<input type="password" name="password" id="password" />
<h3 id="notification"></h3>
<button data-theme="b" id="submit" type="submit">Go</button>
</div>
</form>
<div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'214039341980486', cookie:true,
status:true, xfbml:true
});
</script>
<fb:login-button>Identifiez vous</fb:login-button>
</div>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Create an account </h3>
</div>
</div>
<div data-role="footer">
<h1>Pied de page</h1>
</div>
</div>
The recommended solution to bind a link with jQuery Mobile is :
$('#pageId').live('pagecreate',function(event){
$("#login").bind("click", function(event) {
$.mobile.changePage( "connexion.html", { transition: "flip"} );
});
});
You must add an id="pageId" on you page div.
You must use the pagecreate event (in place of the document.ready with non-mobile webpage)
And check the api of the changePage method (for jqm beta 2).
(and correct your H1 tag : <h1header</h1> )
Here's one big problem...
In index.html, your <script>...</script> is between </head> and <body>.
Put your script inside the <head> or <body> sections, preferably inside <body> just above the </body> tag.
You also have an acute symbol ( ` ) after your last semicolon.
});`
In conexion.html, you are missing the closing head tag:
</head>
Then it also appears you are missing the closing body and html tags at the end of the document:
</body>
</html>
Then run your pages through the W3C Validator and fix any other errors.
加载中,请稍侯......
精彩评论