1

I am developing a little JQuery Mobile application. The initial page contains a button that, when pressed, triggers a call to the server in order to obtain certain data. The new page then displays the data accordingly. Some of its graphical components, also, change in appearance according to the data obtained. I have been trying several approaches and I can't make it work. When the button is pressed, the data is not shown. However when I refresh the page, the page is displayed with the data perfectly. I have been trying using the pageshow event in the head section, in the bottom of the body section and also embedded inside the #pageData tag: it doesn't work for displaying the data but if I want to use an alert, it does work. Can someone please tell me the best approach for this problem? Also, where the Javascript code should be placed (in the head, inside a specific tag or at the bottom of the page)? Thanks in advance!

Here is the code of the new page that makes the server call (sorry id it's messy):

<%! 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>
Anto
  • 4,265
  • 14
  • 63
  • 113

2 Answers2

2

Your problem is :

$(document).ready(function () {

jQuery Mobile don't work correctly with $(document).ready. Instead of it you need to use a correct jQuery Mobile page event.

Before I explain hot to do it, first let me tell you why is your example working after refresh. When your code is executed for the first time document ready is triggered before page is ready, at this point page is still not loaded into the DOM. When you click refresh, that same page is already in DOM and newly executed document ready is successfully executed.

Read more about it in my other ARTICLE (my personal blog) or find it HERE.

Now regarding your problem, you can fix it if you change this:

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

with this:

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

Where platform-status is an id of your first page.

BUT again, there's another problem in your code. You have 2 jQuery Mobile pages and you CAN'T modify them both in the same time. You can modify ether page platform-status or page service-status, but not both of them. For the simple reason only one of them is going to be loaded.

So you will need to split function refreshStatus() into 2 functions, one will be executed when page platform-status is loaded, and second one will be executed when page service-status is loaded. So basically do this:

$(document).on('pagebeforeshow', '#platform-status', function(){       
    // executed function one for page platform-status
});

and

$(document).on('pagebeforeshow', '#service-status', function(){       
    // executed function one for page service-status
});
Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Thanks for the help Gajotres, you are great! I want to ask you one question related to this code: I want to use the pagebeforeshow also for the service-page page. It seems this will create issues with the two pageabeforeshow for platfrom-status and service status. Any ideas? – Anto Mar 13 '13 at 14:56
  • It shouldn't cause problems, because each will execute only when their designated page (platfrom-status and service status) is active, and only one page can be active. – Gajotres Mar 13 '13 at 15:22
  • Where do you put exactly the js code: in the head, in the end of the body or whitin the specific page tag? Thanks\ – Anto Mar 13 '13 at 15:26
  • I can create you a short example. I can send it to your email or post it in this answer. Pick one option? – Gajotres Mar 13 '13 at 15:27
  • send it to my email please, it's fine – Anto Mar 13 '13 at 15:32
  • First you need to give me one :) To be safe, my email address is in my profile, send me an email and I will reply to it. – Gajotres Mar 13 '13 at 15:45
  • I can't see your email in your profile. I also thought that my email was visible in my profile. Anyway, you can send it to toxicpanda82 at yahoo.it – Anto Mar 13 '13 at 15:49
0

You need to use an ajax call to get the data from the server. Then you can append your content with jQuery in the success option of the ajax call.

You can put your code in a div with jQuery using the .html() function:

$(document).ready(function(){

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

});

this code needs to be in the success option of the ajax call. For example:

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

For more info check:

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

Frederik Voordeckers
  • 1,321
  • 15
  • 31