ChangePage (jQuery Mobile) ne fonctionne pas
c'est la première 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"> 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>Ma deuxième page est nommé : 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>- Avez-vous vérifié que votre code est appelé lorsque vous cliquez sur le bouton ? (
alertouconsole.log) de Plus, votre code est incorrect : <h1header</h1>
Vous devez vous connecter pour publier un commentaire.
La solution recommandée pour lier un lien avec jQuery Mobile est :
Vous devez ajouter un id="pageId" sur la page de div.
Vous devez utiliser le pagecreate événement (à la place de la
document.readyavec les non-mobile de la page web)Et vérifier la api de la changePage méthode (par jqm bêta 2).
(et de corriger votre balise H1 :
<h1header</h1>)Voici un gros problème...
Dans index.html, votre
<script>...</script>est entre</head>et<body>.Mettre votre script à l'intérieur de la
<head>ou<body>sections, de préférence à l'intérieur<body>juste au-dessus de la</body>tag.Vous avez également une grave symbole ( ` ) après votre dernier point-virgule.
Dans conexion.html, il vous manque la fermeture de la balise head:
Ensuite, il apparaît également que vous êtes absent de la clôture du corps et de balises html à la fin du document:
Puis exécutez vos pages par le biais de la Le Validateur du W3C et de corriger les autres erreurs.