Je suis novice dans ce domaine, et AJAX.Style jQuery Mobile: initialisation retardée?
J'ai un site qui conserve un en-tête et un pied de page statiques, et remplace le div #mainContent par des pages externes .html/.php. Ce que je trouve c'est que lorsque je clique sur l'un des onglets de la barre de navigation (inclus dans l'en-tête), et que #mainContent est remplacé par une autre page, le style jQuery Mobile (des boutons, menus déroulants , etc) ne se charge pas tout de suite. Initialement, le style par défaut des boutons apparaît, puis (si AJAX se charge) une seconde plus tard, la page effectue un «clignotement de type rafraîchissement», et les boutons sont remplacés par les versions stylées de jQM.
De temps en temps, je suis coincé avec le «cercle de chargement» AJAX, et les boutons conservent leur style d'origine jusqu'à ce que le «lien de barre de navigation» soit de nouveau enfoncé.
Je sais qu'il y a une bonne raison pour cela.
La recherche a indiqué que l'utilisation de "$ (document) .ready (function() {....});" n'est pas idéal pour jQM. J'ai remplacé ceci dans mon script de navigation par "$ (document) .bind ('pageinit', function() {....});", ce qui n'a pas vraiment fait de différence (bien que les boutons de nav fonctionnent toujours).
Voici mon initialisation du script de base pour mon index.php
<!DOCTYPE html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="noteVote">
<!-- HEADER -->
<div data-role="header" align="middle" class="header">
<img src="images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- NAVBAR -->
<div data-role="navbar" data-grid="c" id="navBar">
<ul>
<li><a class="ui-btn" id="coursesButton">Courses</a></li>
<li><a class="ui-btn" id="searchButton">Search</a></li>
<li><a class="ui-btn" id="submitButton">Submit</a></li>
<li><a class="ui-btn" id="accountButton">Account</a></li>
</ul>
</div>
<!-- /NAVBAR -->
</div>
<!-- /HEADER -->
<!--
This is the MAIN This is where the contents will be replaced
-->
<div data-role="content" class="ui-content" id="mainContent">
<div class="main">
<p/>
content here.\
</div>
</div>
<!-- /MAIN -->
<!-- FOOTER -->
<div data-role="footer" class="footer" id="footer">
<?php
require_once('../account.php');
if ($account == "_")
{
echo "Not logged in";
} else {
echo "Logged in as " . $account;
}
?>
</div>
<!-- /FOOTER -->
</div>
<!-- /INDEX -->
<script src="./scripts/navScript.js"></script>
</body>
</html>
Mes navScript.js:
$(document).bind('pageinit', function() {
$("#coursesButton").on("click", function(e) {
//e.preventDefault();
//alert('courses');
$("#mainContent").load("./pages/courses.html");
});
$("#searchButton").on("click", function(e) {
//e.preventDefault();
//alert('search');
$("#mainContent").load("./pages/search.html");
});
$("#submitButton").on("click", function(e) {
//e.preventDefault();
//alert('submit');
$("#mainContent").load("./pages/submit.html");
});
$("#accountButton").on("click", function(e) {
//e.preventDefault();
//alert('account');
$("#mainContent").load("./pages/accountPage.php");
});
});
Et voici une de mes pages externes chargées. Ceci est où le bouton-style ne se charge pas correctement ... (search.html):
<!DOCTYPE html>
<html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="content" class="ui-content" id="mainContent">
<div class="wrap">
<div class="main">
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<form method="POST" action="./search_result.php">
<legend><h3>Course:</h3></legend>
<select name="course" id="customSelect">
<option value="*">All</option>
<option value="COMM2216">COMM-2216</option>
<option value="COMP2121">COMP-2121</option>
<option value="COMP2510">COMP-2510</option>
<option value="COMP2526">COMP-2526</option>
<option value="COMP2714">COMP-2714</option>
<option value="COMP2721">COMP-2721</option>
</select>
</fieldset>
<p/>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend><h4>Type:</h4></legend>
<input type="radio" name="type" value="lec" id="lec"/>
<label for="lec">Lecture</label>
<input type="radio" name="type" value="lab" id="lab">
<label for="lab">Lab</label>
<input type="radio" name="type" value="*" id="both" checked="checked">
<label for="both">Both</label>
<p/>
<input type="submit" value="Go">
</fieldset>
</form>
</div>
</div>
</div>
<script src="./scripts/searchGo.js"></script>
</body>
</html>
Si vous pouviez me donner un pointeur à la raison pour laquelle il faut une seconde pour « rafraîchir » avant la jQuery- Le style mobile surpasse celui du HTML5 standard, je l'apprécierais énormément. J'ai l'impression que c'est dû au fait que les scripts/styles sont chargés deux fois (ie dans index.php et search.html), mais si je ne les charge pas dans chaque page, alors les boutons ne sont pas stylisé ...
Bien que cela n'affecte pas vraiment les fonctionnalités de base, il donne à l'application Web l'impression d'être vraiment en retard.
Cheers.
Cela a fonctionné parfaitement, merci . Les scripts étaient inclus dans certaines des pages s, ce qui provoquait un effet de duplication sur les boutons, etc. Après la suppression des liens de script supplémentaires, ce problème ne se produisait plus et il n'y avait pas de décalage lors de la transition des pages. Merci! –
OscuroAA
@OscuroAA De rien, je suis content que cela a fonctionné pour vous. Assurez-vous d'attacher les écouteurs pendant 'pagecreate' Et spécifiez un identifiant de page, comme dans le code ci-dessus. En savoir plus sur les événements de la page ici http://jqmtricks.wordpress.com/2014/03/26/jquery-mobile-page-events/ – Omar