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");
});
});
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
Vous devez vous connecter pour publier un commentaire.
Réponse Courte
La réponse courte est que jQuery Mobile attend de vous que vous utilisez le hash pour représenter l'état d'une seule page:
Au lieu de cela, vous chargez entièrement une nouvelle page lorsque vous devez juste vous appeler JavaScript pour modifier dynamiquement le contenu de la première page pour représenter la deuxième page.
Si la réponse est logique, génial! Si non, la réponse longue est incroyablement détaillé et décrit deux méthodes que vous pouvez aborder ce problème.
Réponse Longue
Ce que vous demande, en substance, est de savoir comment construire un multiple de la page de site web mobile et les deux pages accessibles par l'URI qui identifie la ressource.
Il existe deux méthodes que vous pouvez utiliser pour s'attaquer à ce problème.
Multi-Modèles De Page:
Pour jQuery mobile, ceci est réalisé avec l' jQuery Mobile Multi-Modèle de page.
L'idée générale est que vos deux pages sont dans le même document HTML, comme ceci:
Ensuite, ce que jQuery Mobile, essentiellement, n'est-il utilise CSS pour masquer l'élément DIV avec l'id="deux" et de ne montrer que le div avec l'id="un". Lorsque l'utilisateur clique sur le lien hypertexte avec le `href="#" les deux, il y a un auditeur qui intercepte le hashChange de l'événement et des feux de code JavaScript qui cache la DIV avec id="un" et montre la DIV avec id="deux".
Ce qui rend les transitions de page apparaissent extrêmement rapide et en douceur, sans avoir besoin de faire un voyage vers le serveur pour obtenir le code HTML.
Dynamiquement Intected Contenu:
Si vos données est plus dynamique, puis une autre option est d'utiliser le jQuery Mobile Page Dynamique Injection. Le principe général de ce processus est similaire à la Multi-Modèles de Page dans le navigateur à l'écoute de la hashChange cas, sauf dans plus de changer de pages, il a également fait une requête AJAX au serveur pour récupérer le contenu JSON.
Lors de la catégorie "Animaux" est cliqué, l'id="home" DIV est caché. Au lieu de recharger la page, dans cet exemple, le code HTML est généré de façon dynamique et remplie avec les résultats d'un objet JSON.
Voici le code qui gère l'affichage du contenu:
Note également que, lorsque l'on regarde l'URL de la page de Catégorie et les Animaux de la page, vous pouvez voir que le document HTML est le même à chaque fois. La différence est la valeur de hachage.
http://jquerymobile.com/demos/1.1.0/docs/pages/dynamic-samples/sample-reuse-page.html
http://jquerymobile.com/demos/1.1.0/docs/pages/dynamic-samples/sample-reuse-page.html#category-items?category=animals
Lorsque le chargement de la page, la valeur de hachage est utilisé pour représenter l'état de la page. Depuis le navigateur est principalement apatrides, le hachage est une astuce qui est disponible pour nous aider à déterminer quel est l'état d'une page doit être affichée à l'utilisateur.
Il suffit de comparer votre changePage appel de méthode avec les URL qui sont utilisés dans le menu dans la page Catégorie:
Notez comment la seule chose qui change lorsqu'un utilisateur clique sur un lien est le hashvalue, la page n'est jamais rechargé. Mais dans votre exemple, vous êtes réellement le charger entièrement une nouvelle page:
Logiquement, vous devez repenser votre stratégie pour la façon dont vous représentez vos pages. Pour faire le plus de l'utilisation de jQuery Mobile, pensez à votre première page HTML comme une image de la totalité de votre CSS, JavaScript, et le contenu statique.
Par la suite, toutes les ressources que vous demandez doit être identifié par une URL avec cette même page suivie par un hashvalue.
Par exemple, si votre page statique est "index.html" puis votre tableau de bord peut être "l'index.html#tableau de bord". Vous pouvez également inclure le tableau de bord le code HTML dans un id="tableau de bord" DIV dynamiquement et de le remplir avec des données à partir du serveur, ou vous pouvez charger le code HTML et les données via AJAX.
Le deuxième point est que n'importe qui d'accéder à votre tableau de bord directement devrez visiter "/index.html#tableau de bord", qui serait de charger votre page d'origine, de feu, de JavaScript qui permettrait de vérifier le hash, de reconnaître qu'il contient "tableau de bord", puis à faire la transition vers la page de tableau de bord en tirant vers l'arrière dans la dynamique de données.
Pour plus d'informations, voir la jQuery Page Dynamique de la Documentation.
Je viens de l'appeler chaque page séparément et d'oublier les transitions de page, j'aime juste la diapositive effets entre les pages donc je vais essayer quelque chose comme ci-dessus à la première, mais même avec ce travail j'ai besoin de comprendre comment ajouter dynamiquement/supprimer et d'exécuter des fichiers javascript basée sur cette page a été chargé comme sa va être trop grand pour continuer à accumuler tout dans le même dom (et pré-charge tous les fichiers js). Maintenant, si ils ont une façon de faire les transitions de page sur une autre page qui permettrait de résoudre tout ce que je voudrais juste faire chaque page de soi contenant. Je vais rechercher plus 🙂 Merci.
Alors vous feriez mieux d'utiliser la 2ème méthode. Créer un seul modèle de page et chaque fois que vous demandez une autre page, il vous suffit de changer la DIV principale dans le modèle de page avec des données dynamiques. Pensez à votre JS comme une bibliothèque de fonctions que vous précontrainte.
OriginalL'auteur jmort253