1

我正在开发一个小的 JQuery Mobile 应用程序。初始页面包含一个按钮，当按下该按钮时，会触发对服务器的调用以获取某些数据。然后新页面相应地显示数据。它的一些图形组件也根据获得的数据改变外观。我一直在尝试几种方法，但我无法使其发挥作用。按下按钮时，不显示数据。但是，当我刷新页面时，页面会完美地显示数据。我一直在尝试在 head 部分、body 部分的底部使用 pageshow 事件，并且还嵌入在 #pageData 标记中：它不适用于显示数据，但如果我想使用警报，它确实有效. 有人可以告诉我解决这个问题的最佳方法吗？还，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> &#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>
4

2 回答 2

2

你的问题是：

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

其中平台状态是您的第一页的 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-13T13:17:19.153 回答
0

您需要使用 ajax 调用从服务器获取数据。然后，您可以在 ajax 调用的成功选项中使用 jQuery 附加您的内容。

您可以使用 .html() 函数将代码放入带有 jQ​​uery 的 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/

于 2013-03-13T11:35:30.663 回答