Page only brings the data the first time it is loaded

Asked

Viewed 32 times

0

Why does the page only load the data once? After loading, if I update the page in the browser, it no longer brings the Getvalues data.

I am using Servlet and JSP.

<html>
<head>
    <title>EscalaWEB</title>

    <style type="text/css">
        body {font: 10pt arial;

        }
        #mytimeline {
            width: 99%;
            height: 200px;
            margin-top:3%;

        }
        #mytimeline-event {
         border-color: orange;
          background-color: yellow;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
color: #fff;
background-color: #428bca;
width: 90%;

}
.col-md-3 column margintop20{
  position:fixed;
}

.margintop20 {
    margin-top:1px;


}

.nav-pills>li>a {
border-radius: 0px;
 position:fixed;
}

a {
color: #000;
text-decoration: none;

}

a:hover {
color: #000;
text-decoration: none;
position:fixed;
}


.nav-stacked>li+li {
margin-top: 0px;
margin-left: 2px;
border-bottom:1px solid #dadada;
border-left:1px solid #dadada;
border-right:1px solid #dadada;
width: 90%;

}
.container{
    position:fixed;
    margin-top:50px;
}
.barra {
  background-color: red;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 35px;
  border-radius: 7px;
}

    </style>



     <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="js/timeline.js"></script>
    <script type="text/javascript" src="js/timeline-locales.js"></script>
    <link rel="stylesheet" type="text/css" href="css/timeline.css">

     <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">

    <script type="text/javascript">
        var timeline;
        var data = [];

             google.load("visualization", "1", {packages:["corechart"]});
             google.setOnLoadCallback(drawVisualization);
             $.ajax({
                     dataType:'json',
                     url : './GetValores',
                     type : 'GET',                 

                    success: function(dados) {

                        queryObject = eval('(' + JSON.stringify(dados) + ')');
                        queryObjectLen = queryObject.jsonArray.length;


                        for(var i=0;i<queryObjectLen;i++){ 

                    var inicio = +new Date(queryObject.jsonArray[i].jsEntra);
                    var fim = +new Date(queryObject.jsonArray[i].jsSai);
                    var content = queryObject.jsonArray[i].jsRe.toString();               

                   data.push({
                                'start': inicio,
                                'end': fim,  
                                'content': content
                            });

                }

            },

                    error: function() {

                        alert("Ocorreu um erro na requisição ajax");
                    }
                });
        // Called when the Visualization API is loaded.
        function drawVisualization() {


            // specify options
            var options = {
                'width':  "84%",
                'height': "auto",
                'layout': "box",
                'locale': "pt",
                'axisOnTop':true
            };

            // Instantiate our timeline object.
            timeline = new links.Timeline(document.getElementById('mytimeline'), options);

            // Make a callback function for the select event
            var onselect = function (event) {
                var row = undefined;
                var sel = timeline.getSelection();
                if (sel.length) {
                    if (sel[0].row !== undefined) {
                        var row = sel[0].row;
                    }
                }

                if (row !== undefined) {
                    var nome = data.getValue(row, 2);//1 = data fim
                    var data1 = data.getValue(row, 1);//1 = data fim
                    alert(nome);
                 var formatted = $.datepicker.formatDate('dd/mm/yy', new Date(data1));
                    document.getElementById("info").innerHTML +=  nome+" "+formatted+"<br>" ;

                }
            };
            // Add event listeners
            google.visualization.events.addListener(timeline, 'select', onselect);


            // Draw our timeline with the created data and options
            timeline.draw(data);
        }






    </script>

</head>
<div class="barra"></div>
<body style="background-color: #FFFAFA;"onload="drawVisualization()">

<div class="col-md-3 column margintop20" style="width:14%;margin-left: 14px; position: fixed;">
            <ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="#"><span class="glyphicon glyphicon-log-out"></span> Sair</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-list-alt"></span> Cadastro</a></li>
  <li><a href="#" class="active2"><span class="glyphicon glyphicon-edit"></span> Editar</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-send"></span> Atividade</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Option 4</a></li>
  <li><a href="#"><span class="glyphicon glyphicon-chevron-right"></span> Option 5</a></li>
</ul>
</div>


<div id="mytimeline" class=""></div>

<div class="container"style="width:15%; float: right;">

 <table class="table" style="margin-right:0px">
    <thead>
      <tr>
        <th></th>

      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>

      </tr>      
      <tr style="background-color:cadetblue ;">
        <td>Férias</td>

      </tr>
      <tr  style="background-color:lightcoral ;">
        <td>Atestado</td>

      </tr>
      <tr class="info">
        <td>Info</td>

      </tr>
      <tr class="warning">
        <td>Warning</td>

      </tr>
      <tr class="active">
        <td>Active</td>

      </tr>
    </tbody>
  </table>
</div>



</body>
</html>

1 answer

0


After researching much discovered, the problem is related to Document.write that link <script type="text/javascript" src="http://www.google.com/jsapi"></script> and google.load("visualization", "1") uses, returning the error:

erro:

Solution: replace the links above by:

<script type="text/javascript" 
src="https://www.gstatic.com/charts/loader.js"></script>

google.charts.load('current', {'packages':['corechart']});

Browser other questions tagged

You are not signed in. Login or sign up in order to post.