私は、ダッシュボードサイトを制作しており、SpringMVC、FusionCharts、およびBootstrap（アーキテクチャの概要を説明しています）を利用しています。私が新しくTomcatサーバーを起動すると、最初にインデックスページを提供したときに、一連のボタンが適切にレンダリングされません。私は3つのJavaScript関数の最初に作られた疑問符を含む白い円の正しい数を取得します。ページをリフレッシュすると、2番目のスクリプト機能によって生成された赤と緑の結果がすぐに表示されます。JavaScript HTMLレンダリングアウトオブシンク - Spring MVCプロジェクト
プリアンブルとして、ボタンが付いたパネルは、正しいカウント、正しい名前、正しいHREF、およびその他すべてで正しく生成されます。色は、ページがリフレッシュされるまで変化しません。このプロジェクトが最初に構築されたときに、データはhttpリクエストサーバー側で収集されていました。ファイルサーバー側からデータをロードし、同じ形式で送信することは、今起こっていることと比較して遅いです。古い方法では、10秒待ってから常に正しい色とアイコンが表示されます。今、ページをリフレッシュするまで、ボタンは空白のままです。その後、正しい結果が得られます。
私はJavaScriptがシングルスレッドであることを知っていますが、これは2つのJavascriptの機能が互いに踏み込んだ結果だと思います。もしそうでなければ、私は困惑して失われます。
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>
これらの最後の3つの機能は、ボタンの動的な番号が含まれ、これらのボタンの内のHTMLを変更し、他のパネルを更新するために、パネルのHTMLに記入します。 3番目は現在しばらく時間がかかり、常に正しい結果が得られます。私はそれが問題だとは思わない。
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");
}
}
}
}
}
私はブラウザを理解するには、JavaScriptの関数の結果をキャッシュしますが、第三の機能は、すべてのリフレッシュ上で実行されるので、なぜ最初の二つは、のではないでしょうか？したがって、2番目の関数の結果は、リフレッシュ後にのみ表示されるのはなぜですか？
このページが最初にロードされたときにボタンが正しく変更されるように変更する必要があるのは何ですか？
UPDATE 1
、関数呼び出しの間で最初の試行でのレンダリング作品をアラートを挿入した後、このようにすることなく、同期を確保するための正しい方法は何ですか？ Index.htmlとの
下：代わりにfalseに設定されたキャッシュで$アヤックスを使用してみてくださいに.get $を使用しての
$(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>
この質問を削除することもできます。大量のコードダンプを実行しました。 – Snickers3192
私は大量の70行の下では電話しません。フォーマットが整っていて、読みやすいです。 C++の質問のいくつかは、殺し屋のための300行の迷惑メールです。さらに、真剣に、アイデアはありませんか？ – patrickjp93
コードダンプは、あなたの問題に関連していないものをたくさん持っているということです。質問をする前に、すべてのコードを最小限の量に絞り込んで問題を示す時間を取る必要があります。とにかくこれはSpringと何が関係していますか？ – Snickers3192