當頁面顯示時無法顯示生成的數據

我正在開發一個小的JQuery Mobile應用程序。初始頁面包含一個按鈕，當按下該按鈕時，將觸發對服務器的調用以獲取某些數據。新頁面會相應地顯示數據。根據獲得的數據，它的某些圖形組件也會發生變化。我一直在嘗試幾種方法，但我無法使其工作。按下按鈕時，數據不顯示。但是，當我刷新頁面時，頁面與數據完美地一起顯示。我一直試圖在body部分底部的head部分中使用pageshow事件，並將其嵌入到#pageData標記中：它不適用於顯示數據，但如果我想使用警報，它可以工作。有人可以告訴我這個問題的最佳方法嗎？另外，應該在哪裏放置Javascript代碼（在頭部，在特定標籤內還是在頁面底部）？提前致謝！當頁面顯示時無法顯示生成的數據

這裏是新的一頁，使服務器調用（對不起ID它的混亂）的代碼：

<%! 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> &#169; 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> &#169; 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> &#169; 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>

來源

2013-03-13 Anto

您能張貼您的問題的代碼？ – Jai 2013-03-13 11:24:35

您的問題是：

$(document).ready(function() {

jQuery Mobile的不的$（document）正常工作。就緒。而不是它，你需要使用正確的jQuery Mobile頁面事件。

在我解釋這個問題之前，先讓我告訴你爲什麼你的例子在刷新後工作。當您的代碼首次執行時文檔準備就緒在頁面準備就緒之前觸發，此時頁面仍未加載到DOM中。當您單擊刷新時，同一頁面已經在DOM中並且新執行文檔準備就緒已成功執行。

瞭解更多關於它在我的其他ARTICLE（我的個人博客），或發現HERE。

現在關於你的問題，你能解決這個問題，如果你改變了這個：

$(document).ready(function() { 
    refreshStatus(); 
    window.setInterval("refreshStatus()", 2500); 
});

與此：

$(document).on('pagebeforeshow', '#platform-status', function(){  
    refreshStatus(); 
});

其中，平臺狀態是你的第一頁的ID。

但是再次，你的代碼還有另一個問題。你有2個jQuery Mobile頁面，你可以在同一時間修改它們。您可以修改以太網頁面平臺狀態或頁面服務狀態，但不能同時修改它們。出於簡單的原因，其中只有一個將被加載。

因此，您需要將函數refreshStatus（）分解爲2個函數，其中一個將在加載頁面平臺狀態時執行，另一個將在加載頁面服務狀態時執行。所以基本上做到這一點：

$(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 
});

來源

2013-03-13 13:17:19 Gajotres

感謝Gajotres的幫助，你太棒了！我想問你一個與這段代碼有關的問題：我想在pagebeforeshow中也使用service-page頁面。看起來這會對兩個頁面顯示平臺狀態和服務狀態造成問題。有任何想法嗎？ – Anto 2013-03-13 14:56:08

它不應該引起問題，因爲只有當它們的指定頁面（平臺狀態和服務狀態）處於活動狀態時，它們纔會執行，並且只有一個頁面可以處於活動狀態。 – Gajotres 2013-03-13 15:22:14

你在哪裏準確地放置了js代碼：在頭部，身體的盡頭還是白皙的特定頁面標記？謝謝\ – Anto 2013-03-13 15:26:06

您需要使用Ajax調用從服務器獲取數據。然後，您可以在jQuery調用ajax調用的成功選項中追加您的內容。

你可以把你的代碼在一個div使用jQuery生成.html（）函數：

$(document).ready(function(){ 

    $("#myDiv").html("<p>Hello World!</p>"); 

});

這段代碼需要在Ajax調用的成功選項。例如：

$.ajax({ 
    url:"www.example.com/fileThatReturnsTheData.php", 
    type: 'POST', 
    success: function(myValue){ 
     $("#myDiv").html("<p>"+myValue+"</p>"); 
    } 
});

欲瞭解更多信息檢查：

http://api.jquery.com/jQuery.ajax/

來源

2013-03-13 11:35:30

你可以看看我發佈的代碼嗎？ – Anto 2013-03-13 11:45:58

當頁面顯示時無法顯示生成的數據

回答

相關問題