jquery mobile rafraîchissante chargé dynamiquement la page

J'ai page1 qui est index.html il lui-même un site web inclut l'en-tête et les scripts ect. J'ai un bouton sur cette page que lorsque vous cliquez dessus vous permettra de charger page2 via ajax et insérez page2 en page1. Page2 est juste la div data-role="page" et html à l'intérieur, ce n'est pas un auto-contenue de la page. Toutefois, l'url change à page2.html et puis si j' "actualiser" la page ne charge pas une page complète parce que page2 n'est pas une page entière, elle était seule ment pour être injecté dans la page1.

J'ai essayé le réglage de la data-url="index.le html&dashboard" (tableau de bord est la principale id sur page2) et dans ce cas l'url semble correct, car il est toujours d'index.le html&tableau de bord donc un rafraichissement de la page recharge page1 même si vous avez été sur la page2. Mais maintenant, jquery capote et s'assoit sur un écran de chargement pour toujours, car il ne peut pas trouver "tableau de bord" parce que le contenu n'a été ajouté après que l'utilisateur a cliqué sur un bouton.

Comment puis-je contourner cela?

Grâce.

page1 index.html

<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
<script><script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile.js"></script>
<script type="text/javascript" charset="utf-8" src="js/global.js"></script>
<script type="text/javascript" charset="utf-8" src="js/login.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile.js"></script>
<script type="text/javascript" charset="utf-8" src="js/login.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<h1>Login</h1>
</div>
<!-- /header -->
<div data-role="content">
<div class="row">
<label for="login_name">Login Name:</label> <input
class="ui-input-text" type="text" name="login_name" id="login_name" />
</div>
<div class="row">
<label for="basic">Password:</label> <input class="ui-input-text"
type="password" name="password" id="password" />
</div>
<div class="row">
<input type="checkbox" name="remember" id="remember" class="custom"
data-mini="true" /> <label for="remember">Remember Me</label>
</div>
<div class="row">
<input type="submit" id="submit" name="submit" value="Submit" />
</div>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</html>

page2 dashboard.html

<div id="dashboard" data-role="page" data-theme="b" data-url="index.html&dashboard">
<div data-role="header" data-theme="b">
<h1 id="page_title">Dashboard</h1>
</div>

login.js

$(function() {
$("#submit").click(function() {
if ($("#login_name").val() == "") {
alert("Please enter a login name");
return false;
}
if ($("#password").val() == "") {
alert("Please enter a password");
return false;
}
$.post(URL + 'login', {
'APIKEY' : APIKEY,
'login' : $("#login_name").val(),
'password' : $("#password").val()
}, function(data) {
if (data.error == "") {
$.mobile.changePage("dashboard.html", { transition : "slide" });
} else {
alert(data.error);
}
}, "json");
});

});

Danny, il y a plusieurs tutoriels et démonstrations sur le site jQuery Mobile qui démontrent exactement la fonctionnalité que vous décrivez, n'est-il pas? Si vous êtes en train de faire quelque chose de différent que ce qui est dans ces démos, alors pourquoi ne pas vous essayer de poster le code que vous avez essayé si nous avons quelque chose à travailler avec? Maintenant, vous nous demandez de levage de poids mort, ce qui est difficile, même pour les plus forts, la plupart des personnes bien informées.
J'ai ajouté le code
C'est beaucoup mieux. Merci. Pouvez-vous montrer le code JS? Vous devez vous assurer que tout le code est indenté avec 4 espaces; sinon, il ne sera pas formaté correctement.
Ok code mis à jour. Merci. Et tout mon code s'exécute et fonctionne, donc ce n'est pas un problème de code ne fonctionne pas, elle a plus d'une logique question de savoir comment il fonctionne.
Danny, j'ai fourni la réponse longue, alors pensé que la réponse courte est peut être suffisant pour vous. Aussi, voir les exemples sur le site jQuery mobile. La meilleure chose à faire est d'afficher la source de chaque page, de sorte que vous pouvez voir ce qui se passe sous le capot. Bonne chance!

OriginalL'auteur Danny | 2012-05-12