Foros del Web » Programando para Internet » Javascript »

ayuda con funcion: combos anidados, con muchos datos se bloquea

Estas en el tema de ayuda con funcion: combos anidados, con muchos datos se bloquea en el foro de Javascript en Foros del Web. hola a todos... tengo un pequeño dilema resulta que tengo unos combos anidados de pais, estado y ciudad que para cargarlos tengo una función javascript ...
  #1 (permalink)  
Antiguo 03/02/2006, 20:01
Avatar de ing_aprendiz  
Fecha de Ingreso: septiembre-2005
Mensajes: 136
Antigüedad: 18 años, 7 meses
Puntos: 0
ayuda con funcion: combos anidados, con muchos datos se bloquea

hola a todos... tengo un pequeño dilema resulta que tengo unos combos anidados de pais, estado y ciudad que para cargarlos tengo una función javascript que lo hace... cuando tengo pocos datos en las tablas todo funciona bien.... pero cuando tengo muchos registros la pagina queda como en un ciclo y no me permite abrirla de una forma correcta.... y cuando voy a ver el codigo fuente de la pagina sale asi:

<script language="javascript">
// Función que rellena el segundo combo según el valor seleccionado en el primero.
// Se le pasa como parámetro el nombre del formulario desde el cuál se llama a la función,
// de ésta manera podemos llamarlo desde combos con el mismo nombre en una misma página pero
// desde distintos formularios.
function rellenaCombo(formulario)

si me pueden colaborar les agradeceria infinitamente pues no he podido dar con el error.....
{
with (document.forms[formulario]) // Establecemos por defecto el nombre formulario pasado para toda la función.
{
var centro = id_pais[id_pais.selectedIndex].value; // Valor seleccionado en el primer combo.
var n = id_depto.length; // Numero de líneas del segundo combo.

id_depto.disabled = false; // Activamos el segundo combo.

for (var i = 0; i < n; ++i)
id_depto.remove(id_depto.options[i]); // Eliminamos todas las líneas del segundo combo.

id_depto[0] = new Option("Seleccione Empleado", 'null'); // Creamos la primera línea del segundo combo.

if (centro != 'null') // Si el valor del primer combo es distinto de 'null'.
{
if (centro == '10')
{
id_depto[id_depto.length] = new Option("AMAZONAS", '91');
id_depto[id_depto.length] = new Option("ANTIOQUIA", '5');
id_depto[id_depto.length] = new Option("ARAUCA", '81');
id_depto[id_depto.length] = new Option("ATLANTICO", '8');
id_depto[id_depto.length] = new Option("BOLIVAR", '13');
id_depto[id_depto.length] = new Option("BOYACA", '15');
id_depto[id_depto.length] = new Option("CALDAS", '17');
id_depto[id_depto.length] = new Option("CAQUETA", '18');
id_depto[id_depto.length] = new Option("CASANARE", '85');
id_depto[id_depto.length] = new Option("CAUCA", '19');
id_depto[id_depto.length] = new Option("CESAR", '20');
id_depto[id_depto.length] = new Option("CHOCO", '27');
id_depto[id_depto.length] = new Option("CORDOBA", '23');
id_depto[id_depto.length] = new Option("CUNDINAMARCA", '25');
id_depto[id_depto.length] = new Option("GUAINIA", '94');
id_depto[id_depto.length] = new Option("GUAJIRA", '44');
id_depto[id_depto.length] = new Option("GUAVIARE", '95');
id_depto[id_depto.length] = new Option("HUILA", '41');
id_depto[id_depto.length] = new Option("MAGDALENA", '47');
id_depto[id_depto.length] = new Option("META", '50');
id_depto[id_depto.length] = new Option("NARIñO", '52');
id_depto[id_depto.length] = new Option("NORTE DE SANTANDER", '54');
id_depto[id_depto.length] = new Option("PUTUMAYO", '86');
id_depto[id_depto.length] = new Option("QUINDIO", '63');
id_depto[id_depto.length] = new Option("RISARALDA", '66');
id_depto[id_depto.length] = new Option("SAN ANDRES", '88');
id_depto[id_depto.length] = new Option("SANTANDER", '68');
id_depto[id_depto.length] = new Option("SUCRE", '70');
id_depto[id_depto.length] = new Option("TOLIMA", '73');
id_depto[id_depto.length] = new Option("VALLE", '76');
id_depto[id_depto.length] = new Option("VAUPES", '97');
id_depto[id_depto.length] = new Option("VICHADA", '99');
}
if (centro == '20')
{
id_depto[id_depto.length] = new Option("Ayacucho", '1');
id_depto[id_depto.length] = new Option("QUITO", '100');
}
if (centro == '30')
{
id_depto[id_depto.length] = new Option("Maracaibo", '42');
}
if (centro == '32')
{
}
if (centro == '40')
{
}
if (centro == '56')
{
}
id_depto.focus(); // Enviamos el foco al segundo combo.
}
else // El valor del primer combo es 'null'.
{
id_depto.disabled = true; // Desactivamos el segundo combo (que estará vacío).
id_pais.focus(); // Enviamos el foco al primer combo.
}

id_depto.selectedIndex = 0; // Seleccionamos el primer valor del segundo combo ('null').
}
}
</script>


asi no hay lio pues tengo pocos registros pero cuando tengo aprox 500 se bloquea la pagina.... la función que tengo es:

<?php
require_once('conexion.php');
?>
<html>
<head>
<script language="javascript">
// Función que rellena el segundo combo según el valor seleccionado en el primero.
// Se le pasa como parámetro el nombre del formulario desde el cuál se llama a la función,
// de ésta manera podemos llamarlo desde combos con el mismo nombre en una misma página pero
// desde distintos formularios.
function rellenaCombo(formulario)
{
with (document.forms[formulario]) // Establecemos por defecto el nombre formulario pasado para toda la función.
{
var centro = id_pais[id_pais.selectedIndex].value; // Valor seleccionado en el primer combo.
var n = id_depto.length; // Numero de líneas del segundo combo.

id_depto.disabled = false; // Activamos el segundo combo.

for (var i = 0; i < n; ++i)
id_depto.remove(id_depto.options[i]); // Eliminamos todas las líneas del segundo combo.

id_depto[0] = new Option("Seleccione Empleado", 'null'); // Creamos la primera línea del segundo combo.

if (centro != 'null') // Si el valor del primer combo es distinto de 'null'.
{
<?php
// CODIGO PHP
// Para cada centro, construimos el segundo combo con los empleados del mismo.
$link= conectarse();
$cons_cen = mysql_query("SELECT * FROM pais",$link);

for ($l = 0; $l < mysql_num_rows($cons_cen); ++ $l)
{
$cen = mysql_fetch_object($cons_cen);
?>
if (centro == '<?php echo $cen->ID_PAIS;?>')
{
<?php
// CODIGO PHP
// Construimos los valores del segundo combo con los empleados del centro.
$link= conectarse();

$cons_emp = mysql_query("SELECT * FROM departamento WHERE ID_PAIS = ".$cen->ID_PAIS." ORDER BY NOM_DEPTO;",$link);

for ($m = 0; $m < mysql_num_rows($cons_emp); ++$m)
{
$emp = mysql_fetch_object($cons_emp);
?>
id_depto[id_depto.length] = new Option("<?php echo $emp->NOM_DEPTO;?>", '<?php echo $emp->ID_DEPARTAMENTO;?>');
<?php
// CODIGO PHP
}
?>
}
<?php
// CODIGO PHP
}
?>
id_depto.focus(); // Enviamos el foco al segundo combo.
}
else // El valor del primer combo es 'null'.
{
id_depto.disabled = true; // Desactivamos el segundo combo (que estará vacío).
id_pais.focus(); // Enviamos el foco al primer combo.
}

id_depto.selectedIndex = 0; // Seleccionamos el primer valor del segundo combo ('null').
}
}
</script>
</head>

<body>

<table width="531" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="10" height="221">&nbsp;</td>
<td width="521" valign="top"><form name="datos" method="post" action="prueba_combo.php">
<p>
<select name="id_pais" onChange="rellenaCombo('datos');">
<option value="null" selected>Seleccione Centro</option>
<?php
// CODIGO PHP
// Contruimos el primer combo con los valores de la tabla 'centros'.
$cons_centros = mysql_query("SELECT * FROM pais",$link);

for ($k = 0; $k < mysql_num_rows($cons_centros); ++$k)
{
$centro = mysql_fetch_object($cons_centros);
echo " <option value=\"".$centro->ID_PAIS."\">".$centro->NOM_PAIS."\n";
}
?>
</select>
</p>
<p>
<select name="id_depto" disabled>
<option value="null">Seleccione Empleado</option>
</select>
</p>
</form></td>
</tr>
</table>
</body>
</html>
  #2 (permalink)  
Antiguo 03/02/2006, 21:09
Avatar de levhita  
Fecha de Ingreso: febrero-2006
Ubicación: Guadalajara, México
Mensajes: 88
Antigüedad: 18 años, 2 meses
Puntos: 0
Ok, dos cositas aquí, numero uno, estas describiendo una pesadilla para tú navegador, en especial IE es muy suceptible a paginas tan pesadas.

Segundo, estas haciendo una página que tiene más contenido en javascript que en el propio contenido de la página.

Sobre la solución te recomiendo altamente utilizar AJAX, yo sé que la palabreja te puede asustar, pero para tantos datos vale la pena.

Lo primero que te recomiendo es que hagas un script que genere un XML válido con los datos de tu base de datos dependiendo de el idpais enviado.

Algo asi como esto:http://wifi.levhita.net/services/cities.php?idcountry=1
(te mandaría el codigo del primero pero va con smarty y un framework, asi que mejor te recomiendo seguir la estructura de resultados de este documento)

No olvides mandar en php "header('content-type txt/xml');" si no el navegador no lo reconocerá como XML.

lo segundo es que te bajes la librería prototype y comienzes a jugar con ella
http://prototype.conio.net/

Ya que andes por ahí puedes escibirme un correo y sigo con el asunto aquí en los foros.

Ha y por último tu pregunta inicial era más de javascript que de otra cosa.
__________________
"La libertad viene en paquetes pequeños, usualmente TCP/IP"
http://blog.levhita.net/
  #3 (permalink)  
Antiguo 06/02/2006, 06:04
O_O
 
Fecha de Ingreso: enero-2002
Ubicación: Santiago - Chile
Mensajes: 34.417
Antigüedad: 22 años, 3 meses
Puntos: 129
Si dices que tu código funciona bien con N datos y con más datos aparentemente deja de funcionar; creo que no es problema de que el código no funcione .. sino que tu máquina: PC cliente, tarda mucho en procesar ese tremendo array javascript que generastes con PHP .. Si le das tiempo .. es problable que veas que todo funcina bien .. eso sí, a unos tiempos no viables para trabajar con esos "combos anidados".

Una forma más óptima de trabajar el tema sería usando AJAX o si no te importa "recargar" tu página cada vez que cambias un selector de tus combos .. podrías usar la solución integra PHP:

http://www.forosdelweb.com/showthrea...999#post664999

Si vas a usar Ajax .. te recomiendo usar XAJAX que en su base usa la librería javascript "prototye" y está orientada al uso con PHP.

http://www.xajaxproject.org/

De todas formas, muevo tu pregunta al foro de Javascript para que te oriente sobre alguna optimización del código que planteas (sería interesante trabajar con un ejemplo con datos fijos .. justo lo que generas con PHP -> en tu navegador: ver código fuente .. toma ese código y ponlo aquí en el foro).

Un saludo,
  #4 (permalink)  
Antiguo 06/02/2006, 21:33
Avatar de ing_aprendiz  
Fecha de Ingreso: septiembre-2005
Mensajes: 136
Antigüedad: 18 años, 7 meses
Puntos: 0
el codigo ya lo puse arriba

hola el código lo puse arriba... eso es lo que sale cuando le doy ver codigo fuente.... ahora lo implante solo en php pero tengo un problema que es que tengo varios text y cuando recarga la página los valores se pierden... me podrian ayudar en esto .... gracias
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:16.