J'ai un site de tableau de bord dans les travaux, et il utilise SpringMVC, FusionCharts, et Bootstrap (pour donner un aperçu architectural). Lorsque je démarre le serveur Tomcat, la toute première fois que je sers la page d'index, un panneau de boutons ne s'affiche pas correctement. Je reçois le bon nombre de cercles blancs avec des points d'interrogation dans la première des 3 fonctions javascript. Si je rafraîchis la page, les résultats rouges et verts voulus apparaissent immédiatement, générés par la deuxième fonction de script. En guise de préambule, le panneau avec les boutons est correctement généré avec le nombre correct, les noms corrects, les HREF corrects et tout le reste. Les couleurs ne changent pas jusqu'à ce que la page soit actualisée. Au moment de la construction de ce projet, les données étaient collectées via la requête http côté serveur. Il était relativement lent à ce qui se passe maintenant: charger les données d'un serveur de fichiers et les envoyer dans le même format. L'ancienne méthode produisait toujours les couleurs et les icônes correctes après une attente de 10 secondes. Maintenant, les boutons restent blancs jusqu'à ce que je rafraichisse la page, puis j'obtiens les bons résultats. Je crois que c'est juste le résultat de deux fonctions Javascript qui se chevauchent, même si je sais que JavaScript est monothread. Sinon, je suis perplexe et perdu.JavaScript HTML Rendu désynchronisé - Projet Spring MVC
Index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Free Bootstrap Admin Template : Dream</title>
<!-- Bootstrap Styles-->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="css/font-awesome.css" rel="stylesheet" />
<!-- Morris Chart Styles-->
<link href="js/morris/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="js/fusioncharts/core/fusioncharts.js"></script>
<script type="text/javascript" src="js/fusioncharts/themes/fusioncharts.theme.fint.js"></script>
</head>
<body>
...
<!-- this is where the button panel is correctly created on every load
but only correctly modified on the 2nd load and later -->
<div class="row"> <div id="AppStatusTable"></div> </div>
...
<script src="js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="js/morris/raphael-2.1.0.min.js"></script>
<script src="js/morris/morris.js"></script>
<!-- Custom Js -->
<!--
<script src="js/custom-scripts.js"></script> -->
<script>
$(document).ready(function(){
$.get("/buttoninfo", function(data, status) {
tableMaker(data, "AppStatusTable");
});
$.get("/appstatus", function(data, status) {
appStatus(data);
});
$.get("/stackstatus", function(data, status) {
stackUpdater(data);
});
});
</script>
</body>
Ces 3 dernières fonctions à remplir le html d'un panneau pour contenir un certain nombre de boutons dynamiques, modifier le html interne de ces boutons, puis mettre à jour les autres panneaux. Le troisième prend actuellement un certain temps et produit toujours des résultats corrects. Je ne pense pas que ce soit le problème.
dashboard.js
function templateLoader(appTag) {
//$.get('/app/' + appTag);
window.location = "/app/" + appTag;
}
function appStatus(data){
for(var i = 0; i < data.length; ++i) {
if(data[i][1] == "up"){
$("#" + data[i][0] + "-appcheck").removeClass("btn-default");
$("#" + data[i][0] + "-appcheck").addClass("btn-success");
$("#" + data[i][0] + "-appcheck-icon").removeClass("fa-exclamation-circle");
$("#" + data[i][0] + "-appcheck-icon").addClass("fa-check");
} else if(data[i][1] == "down"){
$("#" + data[i][0] + "-appcheck").removeClass("btn-default");
$("#" + data[i][0] + "-appcheck").addClass("btn-danger");
$("#" + data[i][0] + "-appcheck-icon").removeClass("fa-exclamation-circle");
$("#" + data[i][0] + "-appcheck-icon").addClass("fa-close");
}
}
}
function tableMaker(data, tableID) {
/* vars used below as the skeleton of the injected buttons*/
var i = 0, j = 0, colLimit = 12;
for(; i < data.length;){
for (var j = 0; j < colLimit && i < data.length; ++j, ++i) {
mytable += colStart + data[i][2] + titleEnd + '\n' + buttonStart + data[i][2] + buttonMiddle1 +
data[i][2] + buttonMiddle2 + data[i][2] + buttonMiddle3 + '><i id="' + data[i][2] +
buttonEnd + colEnd;
}
}
panel += mytable + panelEnd;
document.getElementById(tableID).innerHTML = panel;
}
function stackUpdater(data){
for(var i = 0; i < data.length; ++i){
var curStack = data[i][0];
for(var j = 1; j < data[i].length; j++) {
if(data[i][j] == null) {
break;
} else {
$("#" + curStack + j).removeClass("progress-bar-info");
if(data[i][j] == "up") {
$("#" + curStack + j).addClass("progress-bar-success");
} else {
$("#" + curStack + j).addClass("progress-bar-danger");
}
}
}
}
}
Je comprends les navigateurs cache les résultats des fonctions javascript, mais la troisième fonction est exécutée sur chaque actualisation, alors pourquoi pas les deux premiers être? Et donc, pourquoi les résultats de la deuxième fonction n'apparaîtraient-ils qu'après rafraîchissement?
Que faut-il changer pour s'assurer que les boutons modifient correctement la PREMIÈRE fois que cette page est chargée?
MISE À JOUR 1
Après avoir inséré des alertes entre les appels de fonction, le rendu fonctionne sur le premier essai, alors quelle est la bonne façon d'assurer la synchronisation sans que cela?
Bas de Index.html:
$(document).ready(function(){
$.get("/buttoninfo", function(data, status) {
tableMaker(data, "AppStatusTable");
});
alert("Button table made!");
$.get("/appstatus", function(data, status) {
appStatus(data);
});
alert("Button Data Updated!");
$.get("/stackstatus", function(data, status) {
stackUpdater(data);
});
alert("Stack Data Updated!");
});
</script>
Vous pouvez également supprimer cette question. Vous avez fait un énorme vidage de code. – Snickers3192
Je n'appellerais pas moins de 70 lignes massives, et il est bien formaté et facilement lisible. Certaines des questions C++ sont 300 lignes de déchets pour l'amour des cripes. En outre, sérieusement, pas d'idées? – patrickjp93
Code dump est plus sur que vous avez allouer des choses non liées à votre problème. Avant de poser une question, vous devez prendre le temps de réduire tout le code en un minimum qui démontre votre problème. Qu'est-ce que cela a à voir avec le printemps quand même? – Snickers3192