Combos dependientes con JQuery

Que tal compañeros, como andan?

Yo aquí exponiendo una duda que me surgió ayer, bueno les platico que estoy trabajando con JSP, JSTL, JQuery y Spring MVC. Lo que requiero es, como indica el titulo hacer un combo dependiente de otro, ya anduve googleando una rato y la mayoría de ejemplos que encuentro son para PHP, unos que otro en jsp pero sin un mvc. Realmente ya tengo un 75% de avance, el problema en sí esta cuando quiero pintar los datos de la consulta en el 2do Combo.

Que es lo que llevo?

1.- Java Script:

 
      $(document).ready(function(){
          $("#idpla").change(function(){
                 
                  posicion = $(this).attr("name");
              valor = $(this).val()      

              if(posicion == 'idpla' && valor==0){
                  $("#idemp").html('<option value="0" selected="selected">Selecciona...</option>')
                  }else{
                  $("#idemp").html('<option selected="selected" value="0">Cargando...</option>')
                      var id = $("#idpla").find(':selected').val();
                      $("#idemp").load('../usuario/findEmp.htm?idpla='+id);
                  }
          });
      });

2.- JSP:

                <tr><td class ="campoCliente">Plaza: </td>
                        <td>
                                <form:select path="plaza.idpla" cssStyle="width:130px">
                                        <form:option label="Selecciona..." value="0"/>
                                        <form:options items="${listaPlaza}" itemValue='idpla' itemLabel='plades' />
                                </form:select>
                        </td>
                </tr><tr>
                        <td class ="campoCliente">Empleado: </td>
                        <td>
                                <form:select  path="empleado.idemp" id="idemp" cssStyle="width:280px">
                                        <form:option label="Selecciona..." value="0"/>
                                </form:select>
                        </td>
                </tr>

3.- Controller:

                Plaza plaza;
                Integer idPla = 0;
                List<Empleado> listaEmp;
               
                if(request.getParameter("idpla")!=null){
                        idPla = Integer.valueOf(request.getParameter("idpla"));
                        plaza = negocioComun.findplaById(idPla);
                        listaEmp = negocioComun.findEmpByPla(idPla);
                }else{
                        plaza = new Plaza();
                        listaEmp = new ArrayList<Empleado>();
                }

                return new ModelAndView("usuario/nuevoUser").addObject("listaEmpleados", listaEmp);    

De hecho mi problema está en el controller, ya que no se a donde lo debo redireccionar puesto a que si lo mando al jsp que da de alta al usuario muestra todos los datos del usuario pero en el combo (adjunte una img de lo que les platico).

Mi pregunta es... hacia donde debo redireccionar la lista de empleados para que se muestren en el combo box?
Si alguien lo sabe, le agradeceria mucho su respuesta.

Saludos.

AdjuntoTamaño
Error.png11.69 KB

Opciones de visualización de comentarios

Seleccione la forma que prefiera para mostrar los comentarios y haga clic en «Guardar las opciones» para activar los cambios.
Imagen de ale_imp

Quizas te pueda servir este ejemplo

Hola hace tiempo yo hize un ejemplo parecido quizas te pueda servir al parecer no es exactamente lo que buscas pero te puede servir te dejo la liga del blog http://javamexico.org/blogs/ale_imp/combos_encadenados_con_servlets_y_jq...

Imagen de AlexSnake

Exacto

Mas o menos es la idea que busco.. gracias lo voy a modificar e implementar a lo que tengo y comentaré que salio.

Imagen de fcodiaz

Crea una nueva vista

debes de crear una nueva vista que te genere los que insertarás en el para saber a donde dirigir puedes enviarle parámetros que te indique a donde debe de ir, o bien generar otra acción en tu controlador, recuperar los usuarios y enviar los

Imagen de AlexSnake

Correcto

Que onda fcodiaz, gracias por tu resp. acabo de redireccionar el controller a un solo jsp que contiene un  <c:forEach items>   y me doy cuenta que ya obtengo los datos pero no se muestran en el combo.
Como se esto? bueno en la consola de la barra FireBug muestra los datos obtendios.
Al menos ya los traigo de vuelta ahora solo es cuestion de pintarlos en el combo. Espero publicar la solición hoy mismo.

Imagen de AlexSnake

Lo prometido es deuda

Buen ya tengo una solución (no sé si sea la mejor) y la comparto:
1.-JavaScript:

      $(document).ready(function(){
          $("#idpla").change(function(){
                 
              posicion = $(this).attr("name");
              valor = $(this).val()      

              if(posicion == 'idpla' && valor==0){
                  $("#idemp").html('<option value="0" selected="selected">Selecciona...</option>')
                  }else{
                  $("#idemp").html('<option selected="selected" value="0">Cargando...</option>')
                      var id = $("#idpla").find(':selected').val();
                      $("#idemp").load('../usuario/findEmp.htm?idpla='+id, function(response, status, xhr) {
                                        if (status == "error") {
                                                alert("No se puede dar de alta un nuevo usuario. \nIntente más tarde");
                                        }
                      });
                  }
          });
      });

2.- Jsp (Crear un nuevo jsp --> lista.jsp)

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:forEach items="${listaEmpleados}" var="empleado">
        <OPTION VALUE="${empleado.idemp}">${empleado.nomemp} ${empleado.apepat} ${empleado.apemat}</OPTION>
</c:forEach>

3.- En el controller:

                return new ModelAndView("usuario/lista").addObject("empleado", new Empleado())
                                                                                                  .addObject("listaEmpleados", listaEmp);

Espero que estoy le pueda ayudar a otros.
Saludos.

Usando JSON

Aprovechando que estas realizando tu implementación utilizando Spring MVC, si estas usando la versión 3, te recomendaría usar métodos anotados con @ResposeBody para serializar tus objetos a JSON y evitar añadir al modelo el objeto empleado.
Al disparar el evento change puedes pintar un díalogo de carga y generar una llamada asíncrona con $.ajax o $.get a tu lista JSON y manipular el resultado usando $.each.

Imagen de ezamudio

luxspes

Me recordaron este post de luxspes que parece tratar el mismo problema...

Imagen de AlexSnake

Buena observación

Ok Neko Pui gracias por tu comentario, pero estoy ocupando la ver. 2.5. Aun asi le daré una revisada.
Ok ezamudio me dare una vuelta a ese tema.

Re: luxspes

mmm...
JavaScript:

$(
----$("#pais").change(
--------function(){
------------$.post(
----------------"/laliga",
----------------{ param: $("#pais").val() },
----------------function(response){
--------------------$("#ciudad").html("");
--------------------var html = $("ciudad").html();
--------------------for(int x = 0; x < response.length; x++){
------------------------html += "<option value=\""  + response[x].id +"\">"+response[x].nombre+"</option>"
--------------------}
--------------------$("#ciudad").html(html);
----------------},
------------'json');
--------}
----);
)

Y en tu controlador:

response.setContentType("application/json");
Pais pais = Pais.findById(params.getParameter("param"));
List<Ciudad> ciudades = Ciudad.find("ByPais", pais);
/*Según la librería que uses para serializar un
objeto a JSON usas el método para serializar la
lista de las cds.*/

Y listo =).
**Nota, no todo el código funciona, hace mucho que no uso algo Java EE, por lo tanto seguro hay código que no va, pero espero entiendan la idea.

Imagen de ezamudio

cache

Y como dice luxspes muy al inicio de su post, no es difícil hacer que funcione. Pero el problema viene cuando quieres optimizar el uso de ancho de banda, y que por ejemplo si acabas de cargar la página, y seleccionas México cargue las ciudades pidiéndolas al servidor, luego seleccionas Peru y trae esas ciudades, pero que cuando vuelvas a seleccionar México ya no vaya al servidor, porque pues ya se las trajo una vez, debió haberlas guardado en la memoria del cliente y por lo tanto no es necesario hacer esa petición nuevamente al servidor.

Re: cache

Si la bronca ahí era meterse con los 304 y cosas así. Digamos @luxspes trató de evitarse vueltas al server...@AlexSnake quería saber cómo darse la vuelta al server. A eso me refería, aunque entre otras cosas acabé hablando de Deitel y Deitel y no se que cosas XD.

AYUDA!!!

Que tal amigos, necesito de su ayuda urgentemente, el día de hoy tengo que terminar de implementar springMVC para un proyecto que traemos, el problema es que soy nuevo implementando este framework y la verdad no se como realizar algunas acciones: como por ejemplo, tengo un combo

<table>
    <tr>
     <td class="campos"><form:label path="">Organizaci&oacute;n: </form:label></td>
     <td>
          <form:select path="" id="idorganizaciones">
           <form:option label="Selecciona..." value="0"/>
           <form:options items="${organizaciones}" itemValue="idorganizaciones" itemLabel="nomorganizacion"/>
          </form:select>
         </td>
        </tr>
        <tr>
     <td class="campos"><form:label path="">C&oacute;digo Pa&iacute;s: </form:label></td>
         <td><form:input path="" readonly="true" /></td>  
        </tr>
        <tr>
         <td>&nbsp;</td>
        </tr>
    <tr>                        
         <td class="campos"><form:label path="monprimaria">Moneda Primaria Facturaci&oacute;n:</form:label></td>        
         <td><form:input path="monprimaria" /></td>    
        </tr>
        <tr>
         <td class="campos"><form:label path="codalfmonprimaria">Código Alfab&eacute;tico:</form:label></td>        
         <td><form:input path="codalfmonprimaria" /></td>                            
        </tr>
        <tr>                        
         <td class="campos"><form:label path="desmonprinaria">Descripci&oacute;n:</form:label></td>        
         <td><form:input path="desmonprinaria" /></td>                         
        </tr>  
        <tr>
         <td>&nbsp;</td>
        </tr>  
        <tr>                        
         <td class="campos"><form:label path="monsecundaria">Moneda Secundaria Local:</form:label></td>        
         <td><form:input path="monsecundaria" /></td>                                      
        </tr>  
        <tr>                        
         <td class="campos"><form:label path="codalfmonsecundaria">Código Alfab&eacute;tico:</form:label></td>        
         <td><form:input path="codalfmonsecundaria" /></td>                                        
        </tr>
        <tr>
         <td class="campos"><form:label path="desmonsecundaria">Descripci&oacute;n:</form:label></td>        
         <td><form:input path="desmonsecundaria" /></td>                                                                   
        </tr>                                  
   </table>

Lo primero que requiero es como hacer para que cuando seleccione un registro de la lista ${organizaciones}, en automático se cargue en el siguiente label el id del registro seleccionado, si me explico???

Espero puedan ayudarme... se los agradecere muchisimo...

Combos dependientes (2), el segundo cambia de tamaño!!!

Hola que tal amigos, alguien sabe porque cuando estoy utilizando combos dependientes con jquery, al seleccionar un registro del primer combo, el segundo comienza a reducir su tamaño hasta que llega un momento que desaparece de la jsp.

Espero su ayuda, ya que llevo un buen rato tratando de resolver el problema. Gracias...