Hola a todos!
Estoy intentando hacer una gráfica en
JSP con ayuda de la libreria
Morris.js pero que sea generada mediante
Ajax, soy bastante nueva en Ajax y todo lo que entiendo lo aprendí en la web.. el código que les pondré a continuación corre perfectamente de forma independiente.. pero cuando intento generarlo mediante ajax el div regresa vació..
Muchas gracias a todos de ante mano..
Saludos.!
Función ajax:
Código:
function xmlhttpPostGrafica(strURL) {
variable1=document.getElementById('grarGrafico').value.trim();
if(variable1!="nada"){
var xmlHttpReq = false;
var self = this;
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
updatepagePostGrafica(self.xmlHttpReq.responseText);
}
}
self.xmlHttpReq.send(getquerystringPostGrafica());
}else{
document.getElementById("grafica").style.display = "none";
}
}
function getquerystringPostGrafica() {
var form = document.forms['form1'];
var año = form.catAñoReg.value;
var aniodep = form.catAñoDep.value;
qstr = 'anioreg=' + escape(año)
+ '&aniodep=' +escape(aniodep);
return qstr;
}
function updatepagePostGrafica(str){
document.getElementById("grafica").innerHTML = str;
document.getElementById("grafica").style.display = "block";
}
JSP donde genero el gráfico:
Código:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%
String anio=request.getParameter("aniodep");
String anioreg=request.getParameter("anioreg");
String []TotalesEsp=new com.ms.sqlserver.Supervision(request).obtTotSupEspDepend(<%=anio%>, <%=anioreg%>);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="graficos/raphael.js"></script>
<script src="graficos/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="graficos/g.raphael.js" type="text/javascript"></script>
<script type="text/javascript" src="graficos/g.bar.js"></script>
<script type="text/javascript" src="graficos/morris.js"></script>
</head>
<body >
<div id="bar-example" style="heigh:200px; width:500px;"></div>
<script>
Morris.Bar({
element: 'bar-example',
data: [
{ y: 'Opcion 1', a:<%=TotalesEsp[0]%> },
{ y: 'Opcion 2', a:<%=TotalesEsp[1]%> },
{ y: 'Opcion 3', a:<%=TotalesEsp[2]%> },
{ y: 'Opcion 4', a:<%=TotalesEsp[3]%> },
{ y: 'Opcion 5',a:<%=TotalesEsp[4]%> },
{ y: 'Opcion 6', a:<%=TotalesEsp[5]%> }
],
xkey: 'y',
ykeys: ['a'],
labels: ['2013'],
barColors:['#0091ff','#5f7dff']
});
</script>
</body>
</html>
el metodo ajax lo mando a llamar con un metodo onchange de un select...
ya probé de forma independiente el código de la gráfica y anda bien... no se que pueda ser...
