堆棧內存溢出
  簡體   English   中英

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

[英]Can't display generated data when a page is displayed

 原文  2013-03-13 11:23:10  0   2    javascript/ jquery/ jquery-mobile

問題描述

我正在開發一個小的JQuery Mobile應用程序。 初始頁面包含一個按鈕，當按下該按鈕時，將觸發對服務器的調用以獲取某些數據。 然后，新頁面將相應地顯示數據。 它的某些圖形組件也會根據獲得的數據改變外觀。 我一直在嘗試幾種方法，但無法使其正常工作。 按下按鈕時，不顯示數據。 但是，當我刷新頁面時，頁面將完美顯示數據。 我一直在嘗試在頂部，正文部分的底部使用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>

2 個解決方案

解決方案1
 2 已采納  2013-03-13 13:17:19

您的問題是： 

$(document).ready(function () {

jQuery Mobile無法與$（document）.ready一起正常使用。 代替它，您需要使用正確的jQuery Mobile頁面事件。

在我解釋如何做到這一點之前，首先讓我告訴您為什么刷新后您的示例仍然有效。 當您的代碼第一次執行時，在頁面准備就緒之前會觸發文檔准備就緒，此時頁面仍未加載到DOM中。 當您單擊刷新時，該頁面已經在DOM中，並且新執行的文檔就緒已成功執行。

在我的其他文章 （我的個人博客）中閱讀有關它的更多信息，或在此處找到它。

現在，考慮到您的問題，如果您對此進行更改，則可以解決此問題： 

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

有了這個： 

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

其中platform-status是您的第一頁的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
});

解決方案2
 0  2013-03-13 11:35:30

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

您可以使用.html（）函數將代碼放入帶有jQuery的div中： 

$(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/

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 通過Rails urlhelper生成的鏈接訪問頁面時，不會顯示Google Map 我無法在 html 頁面上顯示來自 json 文件的數據 我在本地服務器上運行時無法顯示頁面 無法獲得要顯示的mongoDB數據 當圖像被點擊時，圖像無法顯示 無法在頁面上顯示JSON 圖片無法顯示在頁面上 可以使用JSSOR在頁面上顯示EXIF圖像數據嗎？ 剛剛從display：none到display：block顯示Div id時滾動頁面ID jQuery生成的表未正確顯示
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM