当页面显示时无法显示生成的数据

我正在开发一个小的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

当页面显示时无法显示生成的数据

回答

相关问题