Combos dependientes con J2EE.

MiLLeN · #1 (**permalink**) 20/06/2008, 05:04

Hola a todos, tras mucho indagar por internet, he conseguido avanzar notablemente en este mi primero contacto con AJAX, pero me he atascado en un par de pasos, y no hay manera.

1º- No consigo recibir correctamente varios parametros desde la funcion AJAX del JSP en el Servlet (que se encarga de generar una estructura XML con los datos).

2º- No consigo saber, como, una vez que el Servlet devuelve la estructura XML, puedo recuperar estos datos para insertarlos en el combo.

Aqui os dejo el codigo que tengo hasta ahora relativo a la parte conflictiva.

Funcion AJAX del JSP:

Cita:

DOM del JSP:

Cita:

<body>
<div align="center" style="margin-top:7px;">
<form id="formulario" name="formulario" method="post" action="CfgEvalServlet.do" target="contenido">
<label class="etiquetaOpcionesForm">Tipo Centro
<select name="tipoCentro" id="tipoCentro" size="1">
<OPTION VALUE="AD">AD</OPTION>
<OPTION VALUE="ADS">ADS</OPTION>
<OPTION VALUE="CML">CML</OPTION>
<OPTION VALUE="CMU">CMU</OPTION>
<OPTION VALUE="EMU">EMU</OPTION>
<OPTION VALUE="EOI">EOI</OPTION>
<OPTION VALUE="ESD">ESD</OPTION>
<OPTION VALUE="EXT">EXT</OPTION>
<OPTION VALUE="FIL">FIL</OPTION>
<OPTION VALUE="SEC">SEC</OPTION>
</select></label>
 
<label class="etiquetaOpcionesForm">Clave Centro
<input type="text" name="claveCentro" id="claveCentro" onChange="javascript:rellenarCursoEscolar(1);"/></label>
 
<label class="etiquetaOpcionesForm">Curso Escolar
<select name="cursoEscolar" id="cursoEscolar" size="1"></select></label>
 
<label class="etiquetaOpcionesForm">
<input name="opcion" type="radio" value="1" checked="true"/>Todo</label>
   
<input type="submit" name="Submit" value="Enviar" />
<br>
</form>
</div>
</body>

Funciones del Servlet encargado de procesar la informacion y devolver la estructura XML (hace uso de una clase DAO para el acceso a la BD).

Cita:

protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();

//Carga de datos.
String tipoCentro = request.getParameter("tipoCentro");
String claveCentro = request.getParameter("claveCentro");
String cursoEscolar = request.getParameter("cursoEscolar");
String estudios = request.getParameter("estudios");
String ensenanza = request.getParameter("ensenanza");
String nivel1 = request.getParameter("nivel1");
String nivel2 = request.getParameter("nivel2");
String nivel3 = request.getParameter("nivel3");
String nivel4 = request.getParameter("nivel4");

//Abre conexion.
Conexion conexion = new Conexion();
conexion.conectar();

//Instancia CfgEvalDAO.
CfgEvalDAO ceDAO = new CfgEvalDAO();

//Segun la opcion...
switch (Integer.parseInt((String) request.getParameter("opcion"))) {
case 1: //Crea XML para el combo "cursoEscolar";
String[] ce = ceDAO.devuelveDatosCursoEscolar(conexion.miConex() , tipoCentro, claveCentro);
imprimeXML(out, ce);
break;
}
//Cargar Curso_Escolar.

}

private void imprimeXML(PrintWriter out, String[] datos) {
out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");

out.print("<xml>");
for (int pos = 0; pos < datos.length; pos++) {
out.print("<curso>");
out.print(datos[pos]);
out.print("</curso>");
}
out.print("</xml>");
}

Un saludo, y muchas gracias a todos.

stock · #2 (**permalink**) 20/06/2008, 12:22

mira, aqui te dejo un buen tutorial al respecto:

http://www.crysfel.com/index.php/200...post-con-ajax/

saludos

MiLLeN · #3 (**permalink**) 23/06/2008, 03:46

Vale Stock, en vez de con mootools, lo estoy haciendo con JQuery (ya que la utilizo para otras tareas y asi la aprovecho mas), el problema que tengo ahora, es que don Google, no me da ninguna informacion, sobre como recoger un responseXML con JQuery... pero ya he avanzado bastante.

Este es el codigo que tengo hasta ahora:

Código:

<script language="javascript">
	var obj = new XMLHttpRequest();
    
	function rellenarCursoEscolar(opcion){	    	
	    var tipoCentro = $("#tipoCentro").val();
	    var claveCentro = $("#claveCentro").val();
	    $.ajax({
		async:true,
		type:"POST",
		url:"CfgEvalAJAXServlet.do",
		dataType:"text/xml",
		data: "tipoCentro=" + tipoCentro + "&claveCentro=" + claveCentro + "&opcion=" + opcion,
		success: cargarDatos()
	    });
	}
	
	function cargarDatos(data){
	    alert("datos: " + data);
	    if (obj.readyState == 4){
		
	    } else {
		$("#claveCentro").get(0).value = "Cargando datos...";
	    }
	}
</script>

Y esta la funcion del Servlet que imprime el XML:

Código:

	void imprimeXML(PrintWriter out, String[] datos) {
		out.println("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");

		//out.print("<xml>");
		for (int pos = 0; pos < datos.length; pos++) {
			out.print("<curso>");
			out.print(datos[pos]);
			out.print("</curso>");
		}
		//out.print("</xml>");
	}

¡¡¡Help me please que ya esta casi!!!!

MiLLeN · #4 (**permalink**) 23/06/2008, 03:48

Ultimo intento:

Código:

<script language="javascript">
	//var obj = new XMLHttpRequest();
    
	function rellenarCursoEscolar(opcion){	    	
	    var tipoCentro = $("#tipoCentro").val();
	    var claveCentro = $("#claveCentro").val();
	    $.ajax({
		async:true,
		type:"POST",
		url:"CfgEvalAJAXServlet.do",
		dataType:"xml",
		cache:false,
		data: "tipoCentro=" + tipoCentro + "&claveCentro=" + claveCentro + "&opcion=" + opcion,
		success: function(xml){
		    alert('hola1');
		    $(xml).find("curso").each(function(){
			alert('hola');
			$("#claveCentro").get(0).value = $(this).find("curso").text();
		    }
		}
	    });
	}
</script>

Y por supuesto... tampoco funciona.

stock · #5 (**permalink**) 24/06/2008, 11:33

hola, realmente jquery no lo conosco mucho, pero aqui encontre unos ejemplos, espero te sirvan.

http://docs.jquery.com/Ajax/jQuery.ajax

saludos

Nono Martínez · #6 (**permalink**) 01/07/2008, 02:15

Código:

$(function(){
$("select#primero").change(function(){
$.getJSON("talAction.do",{id: $(this).val()},
function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="'
+ j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
}
$("select#quecambia").html(options);
$('select#quecambia option:first').attr('selected', 'selected');
})
})
})

Es bastante simple. Espero que te ayude.