小さな JQuery Mobile アプリケーションを開発しています。最初のページにはボタンが含まれており、このボタンを押すと、特定のデータを取得するためにサーバーへの呼び出しがトリガーされます。新しいページには、それに応じてデータが表示されます。グラフィックコンポーネントの一部も、取得したデータに応じて外観が変化します。私はいくつかのアプローチを試みてきましたが、うまくいきません。ボタンを押してもデータは表示されません。ただし、ページを更新すると、ページはデータとともに完全に表示されます。head セクション、body セクションの下部、および #pageData タグ内に埋め込まれた pageshow イベントを使用しようとしています。データの表示には機能しませんが、アラートを使用したい場合は機能します. 誰かがこの問題の最善のアプローチを教えてもらえますか? また、Javascript コードを配置する場所 (ヘッド、特定のタグ内、またはページの下部)? 前もって感謝します！
サーバー呼び出しを行う新しいページのコードは次のとおりです (ごちゃごちゃしていて申し訳ありません)。
<%! 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>