Javascript Can'；t在显示页面时显示生成的数据
我正在开发一个小小的JQuery移动应用程序。初始页面包含一个按钮，按下该按钮时，会触发对服务器的调用以获取特定数据。然后，新页面将相应地显示数据。它的一些图形部件也会根据获得的数据在外观上发生变化。 我一直在尝试几种方法，但都无法奏效。按下按钮时，数据不显示。但是，当我刷新页面时，页面上完美地显示了数据。我一直在尝试在head部分、body部分的底部以及#pageData标记中使用pageshow事件：它不用于显示数据，但如果我想使用警报，它确实有效。 有人能告诉我解决这个问题的最佳方法吗？另外，Javascript代码应该放在哪里（在头部、特定标记内或页面底部）？提前谢谢 以下是进行服务器调用的新页面的代码（抱歉，id，太乱了）：Javascript Can'；t在显示页面时显示生成的数据,javascript,jquery,jquery-mobile,Javascript,Jquery,Jquery Mobile,我正在开发一个小小的JQuery移动应用程序。初始页面包含一个按钮，按下该按钮时，会触发对服务器的调用以获取特定数据。然后，新页面将相应地显示数据。它的一些图形部件也会根据获得的数据在外观上发生变化。 我一直在尝试几种方法，但都无法奏效。按下按钮时，数据不显示。但是，当我刷新页面时，页面上完美地显示了数据。我一直在尝试在head部分、body部分的底部以及#pageData标记中使用pageshow事件：它不用于显示数据，但如果我想使用警报，它确实有效。 有人能告诉我解决这个问题的最佳方法吗？另
T2数据监视器
.ui页面{背景：#2f2d2d；}
校长{
最小高度：45px；
字体大小：100%；
文本对齐：居中；
}
.页脚栏{
最小高度：45px；
}
.页脚按钮{
最小高度：45px；
高度：45px；
最大高度：45像素；
换字：正常；
垂直对齐：底部对齐；
}
.后退按钮{
宽度：80px；
最大高度：32px；
最小高度：32px
}
.back按钮.ui btn文本{
字体大小：100%；
水平对齐：左对齐；
}
[数据角色=页面]{
身高：100%！重要；
职位：相对！重要；
}
#服务名称{
宽度：80%；
}
#平台名称{
宽度：80%；
}
#服务状态标题{
宽度：20%；
}
#平台状态标题{
宽度：20%；
}
.img状态{
最小高度：20px；
最小宽度：20px；
最大高度：30px；
最大宽度：30px；
边缘顶部：12px；
}
.职称类别{
边缘底部：17px；
利润上限：17像素；
颜色：黑色；
文本对齐：居中；
字体大小：粗体；
}
#服务标题网格{
边框顶部样式：实心；
边框顶部颜色：#D3；
边框顶部宽度：1px；
左边框样式：实心；
左边框颜色：#D3；
左边框宽度：1px；
右边框样式：实心；
右边框颜色：#D3；
右边框宽度：1px；
垂直对齐：中间对齐；
文本对齐：居中；
}
#平台标题网格{
边框顶部样式：实心；
边框顶部颜色：#D3；
边框顶部宽度：1px；
左边框样式：实心；
左边框颜色：#D3；
左边框宽度：1px；
右边框样式：实心；
右边框颜色：#D3；
右边框宽度：1px；
垂直对齐：中间对齐；
文本对齐：居中；
}
.定制可折叠{
宽度：74%！重要；
左边距：9px！重要；
边框宽度：0px！重要；
背景色：白色！重要；
}
.定制可折叠h3 a{
边框宽度：0px！重要；
背景：白色！重要；
}
#t2含量{
填充：0！重要；
}
.t2按钮{
边距：0！重要；
最小高度：270px；
宽度：100%；
身高：100%；
}
T2系统监视器
© 2013年投标人须知
地位平台
服务
地位
© 2013年投标人须知
身份服务
服务
地位
© 2013年投标人须知
var statusServicesData={}；
var statusPlatformsData={}；
$（文档）.ready（函数（）{
刷新状态（）；
setInterval（“refreshStatus（）”，2500）；
});
//数据是状态对象
函数刷新状态（）{
$.getJSON（“app/stats/refreshT2StatusPlatformsAndServices”，函数（数据）{
如果（数据==null）{
返回false；
}
$。每个（数据[“服务”]、功能（索引、值）{
statusServicesData[索引]=值；
});
$。每个（数据[“平台”]、功能（索引、值）{
statusPlatformsData[索引]=值；
});
var keypplatformstatus=“Status”；
var-isRed=false；
var-isOrange=false；
for（状态平台数据中的var键）{
if（statusPlatformsData[key][keyPlatformStatus]=='Red'）{
isRed=真；
}else if（statusPlatformsData[key][keypplatformstatus]=“橙色”）{
isOrange=true；
}
}
如果（isRed==true）{
$（“#按钮-a”）.css（“背景”，“#AB1616”）；
}else if（isRed==false&&isOrange==true）{
$（“#按钮-a”）.css（“背景”，“#FD9801”）；
}否则{
$（“#按钮-a”）.css（“背景”，“#4DAB16”）；
}
$（“#平台结果”）.empty（）；
for（状态平台数据中的var键）{
$（“#平台结果”）。追加（“”）；
$（“#平台结果”）。追加（“”）；
$（“#平台结果”）.append（“+statusPlatformsData[key][“Name”]+”）；
$（“#平台结果”）。追加（“”+状态平台数据[键][“说明”]+“”）；
$（“#平台结果”）。追加（“”）；
$（“#平台结果”）。追加（“”）；
if（状态平台数据[键][“状态”]=“红色”）{
$（“#平台结果”）。追加（“”）；
}else if（状态平台数据[键][“状态”]=“橙色”）{
$（“#平台结果”）。追加（“”）；
}否则{
$（“#平台结果”）。追加（“”）；
<%! final static String DATE_FORMAT_NOW = "dd/MM/yy"; %>
<%@ page session="false" %>
<%@ page session="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>T2 Data Monitor</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<style>
.ui-page { background: #2f2d2d;}
.headerBar{
min-height: 45px;
font-size: 100%;
text-align: center;
}
.footerBar{
min-height: 45px;
}
.footer-button{
min-height: 45px;
height:45px;
max-height:45px;
word-wrap: normal;
vertical-align:bottom;
}
.back-button{
width: 80px;
max-height:32px;
min-height:32px
}
.back-button .ui-btn-text{
font-size: 100%;
horizontal-align:left;
}
[data-role=page]{
height: 100% !important;
position:relative !important;
}
#service-title{
width: 80%;
}
#platform-title{
width: 80%;
}
#service-status-title{
width: 20%;
}
#platform-status-title{
width: 20%;
}
.status-img{
min-height: 20px;
min-width: 20px;
max-height: 30px;
max-width: 30px;
margin-top: 12px;
}
.title-class{
margin-bottom:17px;
margin-top:17px;
color: black;
text-align: center;
font-weight:bold;
}
#service-title-grid{
border-top-style: solid;
border-top-color: #d3d3d3;
border-top-width: 1px;
border-left-style: solid;
border-left-color: #d3d3d3;
border-left-width: 1px;
border-right-style: solid;
border-right-color: #d3d3d3;
border-right-width: 1px;
vertical-align: middle;
text-align: center;
}
#platform-title-grid{
border-top-style: solid;
border-top-color: #d3d3d3;
border-top-width: 1px;
border-left-style: solid;
border-left-color: #d3d3d3;
border-left-width: 1px;
border-right-style: solid;
border-right-color: #d3d3d3;
border-right-width: 1px;
vertical-align: middle;
text-align: center;
}
.custom-collapsible {
width: 74% !important;
margin-left: 9px !important;
border-width: 0px !important;
background-color: white !important;
}
.custom-collapsible h3 a {
border-width: 0px !important;
background: white !important;
}
#t2-content {
padding: 0 !important;
}
.t2-button{
margin: 0 !important;
min-height: 270px;
width:100%;
height:100%;
}
</style>
</head>
<body>
<div data-role="page" id="t2-monitor" data-theme="d" >
<script type="text/javascript">
</script>
<div data-role="header" style="height:110px;" data-position="fixed" data-theme="a">
<a href="index-new.html" data-icon="arrow-l" data-iconpos="left" data-transition="slide" data-direction="reverse" class="back-button" style="vertical-align:middle;">Back</a>
<div align="center" style="vertical-align:middle; margin-left:3px; margin-right:3px; margin-top:60px; margin-bottom:25px; font-family:Arial,Sans-serif; font-size:19px">
<img src="images/bigtelematiclogoreduced.png" height="30" width="30"
style="text-align:center;horizontal-align:middle; vertical-align:middle;">
T2 System Monitor
</div>
</div>
<!-- /header -->
<div data-role="content" id="t2-content" data-fullscreen="true" data-theme="d">
<div class="ui-grid-a">
<div class="ui-block-a"><a data-role="button" href="#platform-status" class="t2-button" id="button-a" data-theme="d">Button A</a></div>
<div class="ui-block-b">
<a data-role="button" href="#service-status" class="t2-button" id="button-b" data-theme="d">
Button B</a></div>
</div>
</div>
<div data-role="footer" style="height:45px" data-theme="a">
<h3> © 2013 ITB</h3>
</div>
</div>
<div data-role="page" data-theme="b" id="platform-status">
<div data-role="header" data-position="fixed" class="headerBar" data-theme="a">
<a href="#t2-monitor" data-icon="arrow-l" data-iconpos="left" data-transition="slide" data-direction="reverse" class="back-button">Back</a>
<div align="center" style="vertical-align:middle; margin-top:10px; margin-bottom:10px;">
Status Platforms
</div>
</div>
<div data-role="content" data-theme="d">
<div class="ui-grid-a" id="platform-title-grid">
<div class="title-class ui-block-a" id="platform-title">
Service
</div>
<div class="title-class ui-block-b" id="platform-status-title" >
Status
</div>
</div>
<div id="platform-results">
</div>
<div data-role="footer" style="height:45px" data-theme="a">
<h3> © 2013 ITB</h3>
</div>
</div>
</div>
<div data-role="page" data-theme="b" id="service-status">
<div data-role="header" data-position="fixed" class="headerBar" data-theme="a">
<a href="#t2-monitor" data-icon="arrow-l" data-iconpos="left" data-transition="slide" data-direction="reverse" class="back-button">Back</a>
<div align="center" style="vertical-align:middle; margin-top:10px; margin-bottom:10px;">
Status Services
</div>
</div>
<div data-role="content" data-theme="d">
<div class="ui-grid-a" id="service-title-grid">
<div class="title-class ui-block-a" id="service-title">
Service
</div>
<div class="title-class ui-block-b" id="service-status-title" >
Status
</div>
</div>
<div id="services-results">
</div>
<div data-role="footer" style="height:45px" data-theme="a">
<h3> © 2013 ITB</h3>
</div>
</div>
</div>
<script type="text/javascript">
var statusServicesData = {};
var statusPlatformsData = {};
$(document).ready(function () {
refreshStatus();
window.setInterval("refreshStatus()", 2500);
});
//data is StatusObject
function refreshStatus() {
$.getJSON("app/stats/refreshT2StatusPlatformsAndServices", function (data) {
if (data == null) {
return false;
}
$.each(data["services"], function(index, value) {
statusServicesData[index] = value;
});
$.each(data["platforms"], function(index, value) {
statusPlatformsData[index] = value;
});
<!--------- Code to manage platforms data ----------->
var keyPlatformStatus = "Status";
var isRed = false;
var isOrange = false;
for (var key in statusPlatformsData) {
if(statusPlatformsData [key][keyPlatformStatus]=='Red'){
isRed = true;
}else if(statusPlatformsData [key][keyPlatformStatus]=='Orange'){
isOrange = true;
}
}
if(isRed==true){
$("#button-a").css("background", "#AB1616");
}else if(isRed==false && isOrange==true){
$("#button-a").css("background", "#FD9801");
} else{
$("#button-a").css("background", "#4DAB16");
}
$("#platform-results").empty();
for (var key in statusPlatformsData){
$("#platform-results").append("<div class='ui-grid-a' style='border-style:solid; border-width:1px; border-color:#d3d3d3'>");
$("#platform-results").append("<div class='custom-collapsible ui-block-a' data-role='collapsible' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' style='width: 80%; width: 74% !important; margin-left: 9px !important;border-width: 0px !important; background-color: white !important;'>");
$("#platform-results").append("<h4>"+statusPlatformsData[key]["Name"]+"</h4>");
$("#platform-results").append("<p>"+statusPlatformsData[key]["Description"]+"</p>");
$("#platform-results").append("</div>");
$("#platform-results").append("<div class='ui-block-b' style='vertical-align: middle; text-align: center; width: 20%;'>");
if(statusPlatformsData[key]["Status"]=="Red"){
$("#platform-results").append("<img src='images/red.png' class='status-img' />");
}else if(statusPlatformsData[key]["Status"]=="Orange"){
$("#platform-results").append("<img src='images/orange.png' class='status-img' />");
}else{
$("#platform-results").append("<img src='images/green.png' class='status-img' />");
}
$("#platform-results").append("</div>");
$("#platform-results").append("</div>");
}
<!------------------------------------------------------------------->
<!--------- Code to manage services data----------->
var keyServiceStatus = "Status";
var isRed = false;
var isOrange = false;
for (var key in statusServicesData ) {
if(statusServicesData [key][keyServiceStatus]=='Red'){
isRed = true;
}else if(statusServicesData [key][keyServiceStatus]=='Orange'){
isOrange = true;
}
}
if(isRed==true && isOrange==true){
$("#button-b").css("background", "#AB1616");
}else if(isRed==false && isOrange==true){
$("#button-b").css("background", "#FD9801");
} else{
$("#button-b").css("background", "#4DAB16");
}
$("#service-results").empty();
for (var key in statusServicesData ){
$("#service-results").append("<div class='ui-grid-a' style='border-style:solid; border-width:1px; border-color:#d3d3d3'>");
$("#service-results").append("<div class='custom-collapsible ui-block-a' data-role='collapsible' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' style='width: 80%; width: 74% !important; margin-left: 9px !important;border-width: 0px !important; background-color: white !important;'>");
$("#service-results").append("<h4>"+statusServicesData[key]["Name"]+"</h4>");
$("#service-results").append("<p>"+statusServicesData [key]["Description"]+"</p>");
$("#service-results").append("</div>");
$("#service-results").append("<div class='ui-block-b' style='vertical-align: middle; text-align: center; width: 20%;'>");
if(statusServicesData [key]["Status"]=="Red"){
$("#service-results").append("<img src='images/red.png' class='status-img' />");
}else if(statusServicesData [key]["Status"]=="Orange"){
$("#service-results").append("<img src='images/orange.png' class='status-img' />");
}else{
$("#service-results").append("<img src='images/green.png' class='status-img' />");
}
$("#service-results").append("</div>");
$("#service-results").append("</div>");
}
<!------------------------------------------------------------------->
});
}
</script>
</body>
</html>
$(document).ready(function(){
$("#myDiv").html("<p>Hello World!</p>");
});
$.ajax({
url:"www.example.com/fileThatReturnsTheData.php",
type: 'POST',
success: function(myValue){
$("#myDiv").html("<p>"+myValue+"</p>");
}
});
$(document).ready(function () {
$(document).ready(function () {
refreshStatus();
window.setInterval("refreshStatus()", 2500);
});
$(document).on('pagebeforeshow', '#platform-status', function(){
refreshStatus();
});
$(document).on('pagebeforeshow', '#platform-status', function(){
// executed function one for page platform-status
});
$(document).on('pagebeforeshow', '#service-status', function(){
// executed function one for page service-status
});