Some context first, I need to select a month using a datepicker and a meter (by his serial), the send a query to a MySql database and get some data to "plot in a flot" graph. I already have working the month, the meter selecter and the query.
What I need now is to have the Flot graph and the datepicker in the same page.
What I have tried:
- Apparently there is a conflict with the jQuery/javascript libraries, so I already change the datepicker to the same jQuery version of the flot (jquery-1.11.3).
- Also tried to separate the datepicker of the flot, using another jsp page only for the flot graph.
But still can't manage to get both of the items working well, because the display of the datepicker don't work or the Flot graph doesn't show.
I'm stuck and really need this working.
perfilCarga.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="resources/css/jquery-ui-1.10.3.custom.css" type="text/css" />
<script type="text/javascript" src="resources/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="resources/js/jquery.flot.min.js"></script>
<script type="text/javascript" src="resources/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="resources/js/datepicker_reg.js"></script> <!-- changes the datepicker lenguage to espanish-->
<script type="text/javascript" src="resources/js/datepicker_mes.js"></script><!-- fix the datepicker to ommit the day-->
<script type="text/javascript" src="resources/js/perfil_carga.js"></script><!-- send the meter serial and date to the servlet using ajax-->
<script type="text/javascript">
$.datepicker.setDefaults($.datepicker.regional['es']);
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
<title></title>
</head>
<body>
<table><tr>
<td>
<s:form theme="simple" action="GetProfile" method="POST">
Seleccione un medidor:<br>
<s:select id="meterList" name="meter" list="meters" />
<br>
Seleccione una Fecha:<br>
<input name="startDate" id="startDate" class="date-picker" />
<br><br>
<button type="button" id="LoadRecordsButton" onclick="changeContent()">Generar Perfil</button>
</s:form>
</td>
<td>
<jsp:include page="flot_graph.jsp" />
</td>
</tr></table>
</body>
</html>
flot_graph.jsp
<html>
<head>
<link href="resources/css/flot_plot.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="resources/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="resources/js/jquery.flot.min.js"></script>
<title></title>
<script type="text/javascript">
var d1 = [[1, 500], [2, 300], [3, 500], [4, 300], [5, 500], [6, 300]];
$(document).ready(function () {
$.plot($("#placeholder"), [d1]);
});
</script>
</head>
<body>
<center>
<div id="placeholder"></div>
</center>
</body>
</html>
Update
From the comment of @user3509208 got the following error in the chrome console.
Uncaught TypeError: $(...).datepicker is not a function
In the file datepicker_mes.j (line 2).
$(function() {
$('.date-picker').datepicker(
{
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
function isDonePressed(){
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()){
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
$('.date-picker').focusout();//Added to remove focus from datepicker input box on selecting date
}
},
beforeShow : function(input, inst) {
inst.dpDiv.addClass('month_year_datepicker');
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
$(this).datepicker('setDate', new Date(year, month-1, 1));
$(".ui-datepicker-calendar").hide();
}
}
});
});
