Struts JSP - Crear listas anidadas

[cesartapiag]

Hola a todos. Recientemente he tenido un problema en una pagina jsp, en la cual debo mostrar dos combobox. El problema radica en lo siguiente:

- El primer combobox, que obtiene los datos de proyectos, es este:

<html:select property="idProyecto">
<html:optionsCollection property="listaProyectos"
value="codigo"
label="descripcion"/>
</html:select>

- El segundo combobox, que obtiene los usuarios por proyecto, es este:
<html:select property="idUsuario">
<html:optionsCollection property="listaUsuarios"
value="codigo"
label="descripcion"/>
</html:select>


El formulario esta referenciado como
<html:form name="administrarFB"
action="/administrar/administrar.do"
type="proyecto.administrar.fb.AdministrarFB">

Como el action referencia directamente a mi archivo FB, es de este donde saco los listados. Desde AdministrarFB.java, llamo a las listas que llenan los combobox:

public void setListaProyectos(List listaProyectos){
this.listaProyectos = listaProyectos;}

public List getListaProyectos(){
ConsultarPM consultarPM = ConsultarPM.getInstance();
try{
List lista = consultarPM.getListaProyectos();
return lista;
}catch (ExceptionControlada e){
e.printStackTrace();}
return this.listaProyectos;
}

public void setListaUsuarios(List listaUsuarios){
this.listaUsuarios = listaUsuarios;}

public List getListaUsuarios(){
ConsultarPM consultarPM = ConsultarPM.getInstance();
try{
List lista = consultarPM.getListaUsuarios();
return lista;
}catch (ExceptionControlada e){
e.printStackTrace();
}
return this.listaUsuarios;
}

Estos a su vez, llaman a una función que extrae los listados de la BD, obteniendo para el listado de proyectos el código y descripción, y para el de usuarios, el código, descripción y id de proyecto.

Cuando seleccione un proyecto, solo debe listar los usuarios que pertenezcan a ese proyecto, y cuando no, debe listarlos a todos. He aquí mi problema. No se como hacer para que dinámicamente, se filtre el contenido de un select a través del valor obtenido de otro.

Espero que me puedan ayudar. Si es necesario especificar mas, por favor mencionarlo.

Desde ya, muchas gracias.

[TresPuntoDos]

Para hacer eso tendrias que llamar a la base de datos y recoger solo los usuarios del proyecto añadiendole una clausula WHERE

Si quieres hacerlo dinamicamente tendrias que usar AJAX o la otra opcion seria cada vez que se cambie el primer combo recargar la pagina para que en el otro combo se carguen solo los usuarios que tu quieres

[cesartapiag]

La verdad es que la idea que tenia no es ni de recargar la pagina ni de obtener los datos a través de otra consulta a la base de datos. Quiero hacerlo dinámicamente, pero aun no logro dar con la solución a esto (he estado tratando desde hace unos dias).

Entonces, podrías decirme como hacerlo en Ajax?. Si me pudieras explicar un poco como funciona, o alguna forma de hacerlo, se agradecería.

[TresPuntoDos]

La unica forma que veo yo sin hacer otra consulta a base de datos es mediante Javascript, cargando todos los datos en un array y separando los usuarios por proyecto

Si no la unica solucion es volver a hacer la query en la base de datos. Si no quieres recargar la pagina usa AJAX y si te da igual que se recargue haz un submit y llama a tu metodo Java

Si te decantas por AJAX te sugiero que mires jQuery y en concreto el metodo jQuery.getJSON que es justo lo que necesitas para hacer lo que quieres

[cesartapiag]

Hola a todos, y feliz año 2009. Bueno, hice lo que me recomendaron, utilice javascript
para cargar en un array los datos que traigo a la pagina, y luego los cargo en el combobox.

Los combos me quedaron asi:

<html:select property="idProyecto" onchange="filtroCombo();" styleId="listarProyectos">
<html:optionsCollection property="listaProyectos" value="codigo" label="descripcion"/>
</html:select>

<html:select property="idUsuario" styleId="listarUsuariosXProyecto">
<html:optionsCollection property="listaUsuarios" value="codigo" label="descripcion"/>
</html:select>


Ahora, en el javascript. cree una función filtroCombo, que llenara el combo solo con los datos que quiero, a partir de una lista que le envío. Concateno los datos separados por un @ y luego los separo y almaceno como corresponda. Este es mi javascript:

function obtenerPrimerID(texto)
{
var z;

for(z=0; z<texto.length; z++)
if(texto.substring(z, z+1) == '@')
return texto.substring(0,z);

return "";
}

function obtenerSegundoID(texto)
{
var z;
var posx = 0;

for(z=0; z<texto.length; z++)
{
if(texto.substring(z, z+1) == '@' && posx == 0 )
{
posx = z+1;
}
else
{
if(texto.substring(z, z+1) == '@' && posx > 0 )
return texto.substring(posx,z);
}
}
return "";
}

function obtenerDescripcion(texto)
{
var z;
var posx = 0;
var nArr = 0;
var largo = 0;

largo = texto.length;
for(z=0; z<texto.length; z++)
{
if(texto.substring(z, z+1) == '@' && posx == 0 )
{
posx = 1;
}
else
{
if(texto.substring(z, z+1) == '@' && posx == 1)
{
return texto.substring(z+1,largo);
}
}
}

return "";
}

function filtroCombo()
{
f = document.administrarFB;
var usuarios= new Array(f.listarUsuariosXProyecto.options.length);
<c:forEach items="${administrarFB.listaUsuariosXProyecto}" var="comboTO" varStatus="statusComboTO">
<c:if test="${(statusComboTO.count) == 1}">
usuarios[0] = "<c:out value="${comboTO.idProyecto}"/>@<c:out value="${comboTO.codigo}"/>@<c:out value="${comboTO.descripcion}"/>";
usuarios[<c:out value="${statusComboTO.count}"/>] = "<c:out value="${comboTO.idProyecto}"/>@<c:out value="${comboTO.codigo}"/>@<c:out value="${comboTO.descripcion}"/>";
</c:if>
<c:if test="${(statusComboTO.count) != 1}">
usuarios[<c:out value="${statusComboTO.count}"/>] = "<c:out value="${comboTO.idProyecto}"/>@<c:out value="${comboTO.codigo}"/>@<c:out value="${comboTO.descripcion}"/>";
</c:if>
</c:forEach>

if(parseInt(f.listarProyectos.selectedIndex) != -1)
{
f.listarUsuariosXProyecto.disabled = false;
f.listarUsuariosXProyecto.options.length = 0;
var opt = document.createElement('OPTION');
opt.text = "Todos";
opt.value = parseInt(0);
f.listarUsuariosXProyecto.add(opt);
var i = 1;
var texto = "";
for(var k = 0; k < usuarios.length; k++)
{
if(i < usuarios.length)
{
var proyectoID;
var usuarioID;
var usuarioDescripcion;

texto = usuarios[i];
proyectoID = obtenerPrimerID(texto);

if(parseInt(f.listarProyectos.value) == parseInt(proyectoID))
{
usuarioID = obtenerSegundoID(texto);
usuarioDescripcion = obtenerDescripcion(texto);

var opt = document.createElement('OPTION');
opt.text = usuarioDescripcion;
opt.value = parseInt(usuarioID);
f.listarUsuariosXProyecto.add(opt);
}
}
i++;
}
}
else
{
f.listarUsuariosXProyecto.selectedIndex = 0;
f.listarUsuariosXProyecto.disabled = false;
}
}


Ejecute el código en Internet Explorer 6.0, y no tuve ningún problema. Sin embargo, al hacerlo en Firefox (Version 2.0.0.20), aparece este error:


Error: uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: http://../administrar/lista.jsp :: filtroCombo :: line 698" data: no]

La linea 698 de mi código es:

f.listarUsuariosXProyecto.add(opt);

Quisiera saber q puede ser el problema, y como lo podría solucionar.

Desde ya, gracias.

[cesartapiag]

Encontré el problema, era la compatibilidad de la función add() en Firefox y en Explorer. Tenia que ver con los estándares que se ocupan en ambos navegadores(DOM2 y DOM1), y con el uso de una variable adicional en el caso de la función para Firefox. Hice una función para arreglarlo:

function agregaOpcion(selecciona,opcion) {
try {
selecciona.add(opcion,null);
}
catch (e) {
selecciona.add(opcion,selecciona.length);
}
}

Y se llama como:

agregaOpcion(f.listarUsuariosXProyecto,opt);


El codigo final en javascript queda así:



function obtenerPrimerID(texto)
{
var z;

for(z=0; z<texto.length; z++)
if(texto.substring(z, z+1) == '@')
return texto.substring(0,z);

return "";
}

function obtenerSegundoID(texto)
{
var z;
var posx = 0;

for(z=0; z<texto.length; z++)
{
if(texto.substring(z, z+1) == '@' && posx == 0 )
{
posx = z+1;
}
else
{
if(texto.substring(z, z+1) == '@' && posx > 0 )
return texto.substring(posx,z);
}
}
return "";
}

function obtenerDescripcion(texto)
{
var z;
var posx = 0;
var nArr = 0;
var largo = 0;

largo = texto.length;
for(z=0; z<texto.length; z++)
{
if(texto.substring(z, z+1) == '@' && posx == 0 )
{
posx = 1;
}
else
{
if(texto.substring(z, z+1) == '@' && posx == 1)
{
return texto.substring(z+1,largo);
}
}
}

return "";
}

function agregaOpcion(selecciona,opcion) {
try {
selecciona.add(opcion,null);
}
catch (e) {
selecciona.add(opcion,selecciona.length);
}
}

function filtroCombo()
{
f = document.administrarFB;
var usuarios= new Array(f.listarUsuariosXProyecto.options.length);
<c:forEach items="${administrarFB.listaUsuariosXProyecto}" var="comboTO" varStatus="statusComboTO">
<c:if test="${(statusComboTO.count) == 1}">
usuarios[0] = "<c:out value="${comboTO.idProyecto}"/>@<c:out value="${comboTO.codigo}"/>@<c:out value="${comboTO.descripcion}"/>";
usuarios[<c:out value="${statusComboTO.count}"/>] = "<c:out value="${comboTO.idProyecto}"/>@<c:out value="${comboTO.codigo}"/>@<c:out value="${comboTO.descripcion}"/>";
</c:if>
<c:if test="${(statusComboTO.count) != 1}">
usuarios[<c:out value="${statusComboTO.count}"/>] = "<c:out value="${comboTO.idProyecto}"/>@<c:out value="${comboTO.codigo}"/>@<c:out value="${comboTO.descripcion}"/>";
</c:if>
</c:forEach>

if(parseInt(f.listarProyectos.selectedIndex) != -1)
{
f.listarUsuariosXProyecto.disabled = false;
f.listarUsuariosXProyecto.options.length = 0;
var opt = document.createElement('OPTION');
opt.text = "Todos";
opt.value = parseInt(0);
agregaOpcion(f.listarUsuariosXProyecto,opt);
var i = 1;
var texto = "";
for(var k = 0; k < usuarios.length; k++)
{
if(i < usuarios.length)
{
var proyectoID;
var usuarioID;
var usuarioDescripcion;

texto = usuarios[i];
proyectoID = obtenerPrimerID(texto);

if(parseInt(f.listarProyectos.value) == parseInt(proyectoID))
{
usuarioID = obtenerSegundoID(texto);
usuarioDescripcion = obtenerDescripcion(texto);

var opt = document.createElement('OPTION');
opt.text = usuarioDescripcion;
opt.value = parseInt(usuarioID);
agregaOpcion(f.listarUsuariosXProyecto,opt);
}
}
i++;
}
}
else
{
f.listarUsuariosXProyecto.selectedIndex = 0;
f.listarUsuariosXProyecto.disabled = false;
}
}


Si conocen otra forma mas eficiente usando javascript, háganla saber por favor.

Gracias y espero que les sirva.

[TresPuntoDos]

No mas eficiente, pero si con menos codigo usando jQuery