Why does the page load data only once? After loading, if I refresh the page in the browser, it no longer brings the GetValores data.
I'm 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><scripttype="text/javascript" src="http://www.google.com/jsapi"></script><scripttype="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>
