Menus Dinamicos
Jes?
05 de Enero del 2006
Hola
Tengo un problema, les explico aver si me pueden ayudar, necesito hacer una serie de menus denamicos que realicen como una especie de filtro entre ellos, el chiste de esto es que los menus deven ser llenados desde una base de datos en mysql, esto ya logre hacerlo, ahora necesito que cuando seleccione un elemento del primer menu, me realice una consulta en un segundo menu, seleccionandome unicamente algunos datos de la base de datos, despues, al elegir un elemento del segundo menu me realice una nueva consulta y me debuelva esa consulta en un tercer menu, y lo mismo con este ultimo que me realice de nuevo una consulta a la base de datos y me debuelva los datos relacionados.
Ejemplo:
Uprimer combo que seleccione de una base de datos, los paises que esten disponibles, despues de esto que al elegir un pais, en un segundo combo me debuelva unicamente los estados de ese pais, despues en un tercer combo me realice una nueva consulta a la base de datos y me debuelva, las ciudades, despues en otro combo me debuelva, las provincias.
todo esto lo he estado realizando con php pero tampoco he podido, ahora lo estoy intentando en javascript, pero javascript no lo se manejar muy bien.
NOTA: las listas no pueden ser estaticas por que constantemente se esta n ingresando nuevos estados y nuevas provincias y tambien se estan eliminando, tiene que ser desde una base de datos.
Por favor ayudenme......
Tengo un problema, les explico aver si me pueden ayudar, necesito hacer una serie de menus denamicos que realicen como una especie de filtro entre ellos, el chiste de esto es que los menus deven ser llenados desde una base de datos en mysql, esto ya logre hacerlo, ahora necesito que cuando seleccione un elemento del primer menu, me realice una consulta en un segundo menu, seleccionandome unicamente algunos datos de la base de datos, despues, al elegir un elemento del segundo menu me realice una nueva consulta y me debuelva esa consulta en un tercer menu, y lo mismo con este ultimo que me realice de nuevo una consulta a la base de datos y me debuelva los datos relacionados.
Ejemplo:
Uprimer combo que seleccione de una base de datos, los paises que esten disponibles, despues de esto que al elegir un pais, en un segundo combo me debuelva unicamente los estados de ese pais, despues en un tercer combo me realice una nueva consulta a la base de datos y me debuelva, las ciudades, despues en otro combo me debuelva, las provincias.
todo esto lo he estado realizando con php pero tampoco he podido, ahora lo estoy intentando en javascript, pero javascript no lo se manejar muy bien.
NOTA: las listas no pueden ser estaticas por que constantemente se esta n ingresando nuevos estados y nuevas provincias y tambien se estan eliminando, tiene que ser desde una base de datos.
Por favor ayudenme......
Califa
05 de Enero del 2006
Buenas.
El problema es interesante. Para lo que querés hacer, necesitás combinar php y javascript. Con php sólo se puede hacer pero cada vez que selecciones alguna opción en un combo va a recargar la página, lo cual es un despropósito, además de quedar horrible (aún asÃ, vi sitios de multinacionales que tienen ese sistema!!!).
El tema es que cuando empezás a mezclar js, php más código html, el resultado es un engendro al que mejor que nunca le tengas que volver a meter mano (si conseguÃs hacerlo funcionar sin bugs, en primer lugar).
Bueno, al punto: la mejor solución que veo es armar una base con 3 tablas: paises, provincias (o estados) y municipios (o ciudades, los nombres lo verás vos). Cada una de esas tablas tiene que tener un id autonumérico como clave principal, y una clave secundaria que referencie a su "padre".
Ej:
PAIS
id_pais (CP, AUTO)
nombre_pais
PROVINCIA
id_provincia (CP, AUTO)
id_pais (CS)
nombre_provincia
MUNICIPIO
id_municipio (CP, AUTO)
id_provincia (CS)
id_pais (CS)
nombre_municipio
Estas tablas las administrás como siempre, pero, lo único que cada vez que hacés una modificación (INSERT, UPDATE o DELETE, no SELECT) en alguna, ejecutás un script que genere un archivo ".js" con un array en javascript. Ese array va a tener los valores actuales de la tabla que modificaste; o sea, cada vez que modificás la tabla, actualizás el ".js" respectivo, que va a ser la "base de datos" para los combos.
Después, en la página que tenga los combos, siempre vas a leer ese ".js" con el array. Si lo ves desde la página, el funcionamiento es estático, lo cual simplifica todo. Pero, en realidad, es dinámico, porque cada array/archivo .js va a cambiar cada vez que cambies algo en la tabla. Cuando recargues la página de los combos, el código js va a leer la nueva versión.
Te paso el código de la página principal (con los combos) y los dos .js que estoy generando con php a partir de la base para que lo pruebes. Tranquilamente se puede agregar un 3º nivel (ciudades):
----------
combos.php (puede ser .htm)
----------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="paises.js"></script>
<script language="javascript" type="text/javascript" src="provincias.js"></script>
<script language="javascript" type="text/javascript">
function actualizarCombos() {
var auxPais = document.getElementById('pais');
var auxProvincia = document.getElementById('provincia');
var paisActual = auxPais.value; // el paÃs seleccionado
var provinciaActual = auxProvincia.value; // la provincia seleccionada
// actualiza el combo paÃs
auxPais.length = arrPaises.length;
for (var i=0;i<arrPaises.length;i++) {
auxPais.options[i].value = arrPaises[i][0]; // id_pais
auxPais.options[i].text = arrPaises[i][1]; // nombre_pais
}
// arma un array con las provincias del paÃs seleccionador a partir del array que
// tiene todas las provincias de todos los paÃses.
var arrProvinciasActual = new Array();
var contProvActual = 0; // cuenta la cantidad de provincias del paÃs seleccionado
for (var j=0;j<arrProvincias.length;j++) {
if (arrProvincias[j][1] == auxPais.value) { // id_pais
arrProvinciasActual[contProvActual] = new Array();
arrProvinciasActual[contProvActual][0] = arrProvincias[j][0]; //id_pronvincia
arrProvinciasActual[contProvActual][1] = arrProvincias[j][2]; //nombre_provincia
contProvActual++;
}
}
//actualiza el combo provincia
auxProvincia.length = 0; // inicializar largo combo provincia
for (var k=0;k<arrProvinciasActual.length;k++) {
auxProvincia.length += 1;
auxProvincia.options[k].value = arrProvinciasActual[k][0]; //id_provincia
auxProvincia.options[k].text = arrProvinciasActual[k][1]; //nombre_provincia
}
}
</script>
</head>
<body onload="actualizarCombos();">
<select id="pais" onchange="actualizarCombos();"></select>
<select id="provincia"></select>
</body>
</html>
---------
paises.js
---------
var arrPaises=new Array();arrPaises[0] = new Array();arrPaises[0][0]='1';arrPaises[0][1]='Argentina';arrPaises[1] = new Array();arrPaises[1][0]='2';arrPaises[1][1]='Brasil';arrPaises[2] = new Array();arrPaises[2][0]='3';arrPaises[2][1]='Chile';arrPaises[3] = new Array();arrPaises[3][0]='4';arrPaises[3][1]='Uruguay';
-------------
provincias.js
-------------
var arrProvincias=new Array();arrProvincias[0] = new Array();arrProvincias[0][0]='1';arrProvincias[0][1]='1';arrProvincias[0][2]='Buenos Aires';arrProvincias[1] = new Array();arrProvincias[1][0]='2';arrProvincias[1][1]='1';arrProvincias[1][2]='Córdoba';arrProvincias[2] = new Array();arrProvincias[2][0]='3';arrProvincias[2][1]='1';arrProvincias[2][2]='Corrientes';arrProvincias[3] = new Array();arrProvincias[3][0]='4';arrProvincias[3][1]='1';arrProvincias[3][2]='Santa Fe';arrProvincias[4] = new Array();arrProvincias[4][0]='5';arrProvincias[4][1]='2';arrProvincias[4][2]='Sao Paulo';arrProvincias[5] = new Array();arrProvincias[5][0]='6';arrProvincias[5][1]='2';arrProvincias[5][2]='RÃo Grande do Sul';arrProvincias[6] = new Array();arrProvincias[6][0]='7';arrProvincias[6][1]='2';arrProvincias[6][2]='Paraná';arrProvincias[7] = new Array();arrProvincias[7][0]='8';arrProvincias[7][1]='2';arrProvincias[7][2]='Santa Catarina';arrProvincias[8] = new Array();arrProvincias[8][0]='9';arrProvincias[8][1]='1';arrProvincias[8][2]='Santa Cruz';arrProvincias[9] = new Array();arrProvincias[9][0]='10';arrProvincias[9][1]='3';arrProvincias[9][2]='Santiago';
El problema es interesante. Para lo que querés hacer, necesitás combinar php y javascript. Con php sólo se puede hacer pero cada vez que selecciones alguna opción en un combo va a recargar la página, lo cual es un despropósito, además de quedar horrible (aún asÃ, vi sitios de multinacionales que tienen ese sistema!!!).
El tema es que cuando empezás a mezclar js, php más código html, el resultado es un engendro al que mejor que nunca le tengas que volver a meter mano (si conseguÃs hacerlo funcionar sin bugs, en primer lugar).
Bueno, al punto: la mejor solución que veo es armar una base con 3 tablas: paises, provincias (o estados) y municipios (o ciudades, los nombres lo verás vos). Cada una de esas tablas tiene que tener un id autonumérico como clave principal, y una clave secundaria que referencie a su "padre".
Ej:
PAIS
id_pais (CP, AUTO)
nombre_pais
PROVINCIA
id_provincia (CP, AUTO)
id_pais (CS)
nombre_provincia
MUNICIPIO
id_municipio (CP, AUTO)
id_provincia (CS)
id_pais (CS)
nombre_municipio
Estas tablas las administrás como siempre, pero, lo único que cada vez que hacés una modificación (INSERT, UPDATE o DELETE, no SELECT) en alguna, ejecutás un script que genere un archivo ".js" con un array en javascript. Ese array va a tener los valores actuales de la tabla que modificaste; o sea, cada vez que modificás la tabla, actualizás el ".js" respectivo, que va a ser la "base de datos" para los combos.
Después, en la página que tenga los combos, siempre vas a leer ese ".js" con el array. Si lo ves desde la página, el funcionamiento es estático, lo cual simplifica todo. Pero, en realidad, es dinámico, porque cada array/archivo .js va a cambiar cada vez que cambies algo en la tabla. Cuando recargues la página de los combos, el código js va a leer la nueva versión.
Te paso el código de la página principal (con los combos) y los dos .js que estoy generando con php a partir de la base para que lo pruebes. Tranquilamente se puede agregar un 3º nivel (ciudades):
----------
combos.php (puede ser .htm)
----------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript" src="paises.js"></script>
<script language="javascript" type="text/javascript" src="provincias.js"></script>
<script language="javascript" type="text/javascript">
function actualizarCombos() {
var auxPais = document.getElementById('pais');
var auxProvincia = document.getElementById('provincia');
var paisActual = auxPais.value; // el paÃs seleccionado
var provinciaActual = auxProvincia.value; // la provincia seleccionada
// actualiza el combo paÃs
auxPais.length = arrPaises.length;
for (var i=0;i<arrPaises.length;i++) {
auxPais.options[i].value = arrPaises[i][0]; // id_pais
auxPais.options[i].text = arrPaises[i][1]; // nombre_pais
}
// arma un array con las provincias del paÃs seleccionador a partir del array que
// tiene todas las provincias de todos los paÃses.
var arrProvinciasActual = new Array();
var contProvActual = 0; // cuenta la cantidad de provincias del paÃs seleccionado
for (var j=0;j<arrProvincias.length;j++) {
if (arrProvincias[j][1] == auxPais.value) { // id_pais
arrProvinciasActual[contProvActual] = new Array();
arrProvinciasActual[contProvActual][0] = arrProvincias[j][0]; //id_pronvincia
arrProvinciasActual[contProvActual][1] = arrProvincias[j][2]; //nombre_provincia
contProvActual++;
}
}
//actualiza el combo provincia
auxProvincia.length = 0; // inicializar largo combo provincia
for (var k=0;k<arrProvinciasActual.length;k++) {
auxProvincia.length += 1;
auxProvincia.options[k].value = arrProvinciasActual[k][0]; //id_provincia
auxProvincia.options[k].text = arrProvinciasActual[k][1]; //nombre_provincia
}
}
</script>
</head>
<body onload="actualizarCombos();">
<select id="pais" onchange="actualizarCombos();"></select>
<select id="provincia"></select>
</body>
</html>
---------
paises.js
---------
var arrPaises=new Array();arrPaises[0] = new Array();arrPaises[0][0]='1';arrPaises[0][1]='Argentina';arrPaises[1] = new Array();arrPaises[1][0]='2';arrPaises[1][1]='Brasil';arrPaises[2] = new Array();arrPaises[2][0]='3';arrPaises[2][1]='Chile';arrPaises[3] = new Array();arrPaises[3][0]='4';arrPaises[3][1]='Uruguay';
-------------
provincias.js
-------------
var arrProvincias=new Array();arrProvincias[0] = new Array();arrProvincias[0][0]='1';arrProvincias[0][1]='1';arrProvincias[0][2]='Buenos Aires';arrProvincias[1] = new Array();arrProvincias[1][0]='2';arrProvincias[1][1]='1';arrProvincias[1][2]='Córdoba';arrProvincias[2] = new Array();arrProvincias[2][0]='3';arrProvincias[2][1]='1';arrProvincias[2][2]='Corrientes';arrProvincias[3] = new Array();arrProvincias[3][0]='4';arrProvincias[3][1]='1';arrProvincias[3][2]='Santa Fe';arrProvincias[4] = new Array();arrProvincias[4][0]='5';arrProvincias[4][1]='2';arrProvincias[4][2]='Sao Paulo';arrProvincias[5] = new Array();arrProvincias[5][0]='6';arrProvincias[5][1]='2';arrProvincias[5][2]='RÃo Grande do Sul';arrProvincias[6] = new Array();arrProvincias[6][0]='7';arrProvincias[6][1]='2';arrProvincias[6][2]='Paraná';arrProvincias[7] = new Array();arrProvincias[7][0]='8';arrProvincias[7][1]='2';arrProvincias[7][2]='Santa Catarina';arrProvincias[8] = new Array();arrProvincias[8][0]='9';arrProvincias[8][1]='1';arrProvincias[8][2]='Santa Cruz';arrProvincias[9] = new Array();arrProvincias[9][0]='10';arrProvincias[9][1]='3';arrProvincias[9][2]='Santiago';