JavaScript HTML呈现不同步--Spring MVC项目_Javascript_Java_Jquery_Html_Spring

JavaScript HTML呈现不同步--Spring MVC项目

javascript java jquery html spring

JavaScript HTML呈现不同步--Spring MVC项目,javascript,java,jquery,html,spring,Javascript,Java,Jquery,Html,Spring,我正在开发一个仪表板站点，它利用了SpringMVC、FusionCharts和Bootstrap（提供架构概述）。当我刚启动Tomcat服务器时，第一次看到索引页面时，一个按钮面板将无法正常呈现。在3个javascript函数的第一个函数中，我得到了正确数量的带问号的白色圆圈。如果我刷新页面，第二个脚本函数会立即生成预期的红色和绿色结果作为前导，面板上的按钮正确生成，具有正确的计数、正确的名称、正确的HREF和所有其他内容。在刷新页面之前，颜色不会改变。当这个项目最初构建时，数据是通过htt

我正在开发一个仪表板站点，它利用了SpringMVC、FusionCharts和Bootstrap（提供架构概述）。当我刚启动Tomcat服务器时，第一次看到索引页面时，一个按钮面板将无法正常呈现。在3个javascript函数的第一个函数中，我得到了正确数量的带问号的白色圆圈。如果我刷新页面，第二个脚本函数会立即生成预期的红色和绿色结果

作为前导，面板上的按钮正确生成，具有正确的计数、正确的名称、正确的HREF和所有其他内容。在刷新页面之前，颜色不会改变。当这个项目最初构建时，数据是通过http请求服务器端收集的。与现在的情况相比，它的速度相对较慢：从文件服务器端加载数据并以相同的格式发送。旧方法总是在等待10秒后生成正确的颜色和图标。现在，按钮保持空白白色，直到我刷新页面，然后我得到正确的结果

我相信这只是两个Javascript函数相互作用的结果，尽管我知道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>


免费引导管理模板：梦想
...
...
$（文档）.ready（函数（）{
$.get（“/buttoninfo”，函数（数据、状态）{
tableMaker（数据，“AppStatusTable”）；
});
$.get（“/appstatus”，函数（数据，状态）{
应用状态（数据）；
});
$.get（“/stackstatus”，函数（数据、状态）{
堆栈更新程序（数据）；
});
});

最后3个函数填充面板的html以包含动态数量的按钮，修改这些按钮的内部html，然后更新其他面板。第三种方法目前需要一段时间，并且总是产生正确的结果。我不怀疑这是个问题

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");
                }
            }
        }
    }
}

函数模板加载程序（appTag）{
//$.get（'/app/'+appTag）；
window.location=“/app/”+appTag；
}
功能状态（数据）{
对于（变量i=0；idata[i][2]+buttonMiddle2+data[i][2]+buttonMiddle3+'>而不是使用$.get。请尝试使用$.ajax并将缓存设置为false。如果$.get是绝对必要的，请尝试在每个请求中添加时间戳。您可以参考
希望你能帮我解决这个问题。你也可以删除这个问题。你已经做了大量的代码转储。我不会调用70行大的，而且格式很好，易读。一些C++问题是300条垃圾。问题。在你提问之前，你需要花点时间将所有代码精简到一个最小的数量，以证明你的问题。这与Spring有什么关系？这是最小的。我所发布的是html页面上调用JavaScript的位置，使用了哪些其他JavaScript库，以什么顺序，以及y javascript代码是。这是最小的。我不知道Spring MVC是否是问题的一部分，这也是为什么我要问它是否可能的一部分。在这里，对你们窃笑的人来说，修剪得足够了吗？我对为什么和如何一样多。为什么这能解决问题？这不一定是必要的。我只是一个完整的javascript和web开发novice完成了一项我正试图充分利用的任务。正如JS代码风格可能显示的那样，我来自后端背景。我已经通过在appstatus函数上延迟90毫秒实现了一个临时修复。希望在修改stackstatus以从文件加载后，我可以更改函数调用顺序，这个争用问题将自行解决。它可以y也只是在部署到AWS上后自行解决问题，我们仍然存在传播延迟。不确定，但由于这3个函数是在document.ready事件中执行的，并且每个函数都涉及一个带有回调的ajax调用，因此需要对回调进行重新初始化。我对JS一点也不了解，我不知道你在做什么如果你能给我一个例子的链接，我将不胜感激。谢谢你的回复！
    $(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>