Actualizar valores de selects generados dinamicamente sin recargar página

KarenFerreira · #1 (**permalink**) 26/07/2005, 09:55

Hola a todos,
Muchas gracias por leer ese post de antemano sea que puedan o no ayudarme a solucionar mi inconveniente.

Pues bien, tengo un formulario que se genera dinamicamente con varios menus cuya cantidad depende de un parametro obtenido de la pagina anterior. Cabe destacar que se generan tal vez diria yo a manera de bloques, es decir, genera una cierta cantidad de menus y a su vez se generan de cada uno de estos, otros menus cuya informacion depende de la opcion seleccionada en el principal.

Ahora, he ahi mi problema, yo necesito hacer que cada vez que se seleccione una opcion diferente de uno de los menús principales, los valores contenidos en sus "hijos" cambien.

Se que la solucion mas factible es hacer una recarga de la pagina enviando a los menus hijos la informacion que indica que el padre ha cambiado, pero, no puedo hacer una recarga de la pagina puesto que me implica limpiar la totalidad del formulario o hacer una retransmision de los valores seleccionados, cosa que no se como hacer debido al caracter dinamico de mis menus.

(Aclaracion: No estoy tratando de referirme a POO al decir padre e hijo, es solo una analogia para tratar de hacerme entender.)

Y bien, pues aca esta el codigo que tengo hasta ahora, aunque solo es una prueba para un menu y otros que se generan mediante ciclos, bastante estatico por cierto, pero sobre el que estoy tratando de trabajar mis pruebas

Código HTML:

<html>
<head>
<title>Una de mil pruebas</title>
<script language="javascript">
function activatabloide(obj)
{
 if(obj.value == 2)
 {
   document.getElementById('tabloide').style.display = "none";
   document.getElementById('universal').style.display = "";
 }
 else if(obj.value == 1)
 {
   document.getElementById('universal').style.display = "none";
   document.getElementById('tabloide').style.display = "";
 }
}
</script>
</head>

<body>
<form name="form1" method="post" action="unademilpruebas.php">
  <table width="300" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td>El independiente </td>
    </tr>
    <tr>
      <td><select name="tamano" id="tamano" onChange="activatabloide(this)">
	      <option value="1">Universal</option>
		  <option value="2" selected>Tabloide</option>
            </select></td>
    </tr>
    <tr>
      <td>Los Dependientes</td>
    </tr>
    <?php
	for($i=0; $i<5; $i++)
	{
	?>
	<tr id="universal"  style="display:none">
      <td>
	  <select name="numeracionuniv" id="numeracionuniv">
	  <option value="<?php echo $i+1; ?>" selected><?php echo $i+1; ?></option>
       <?php
	   for($j=1; $j<8; $j++)
		{
		  if($j <> $i+1)
		  {
	   ?>
		  <option value="<?php echo $j; ?>"><?php echo $j; ?></option>
		<?php
		  }
	   } 
	 ?> 
	 </select></td>
	</tr>
	<tr id="tabloide">
	  <td>
	  <select name="numeraciontab" id="numeraciontab">
	  <?php
	   $j=1;
	   $k=10;
	   while($j<=5 && $k>5)
		{
		  if($j <> $i+1)
		  {
	   ?>
		  <option value="<?php echo $j; ?>"><?php echo $j."-".$k; ?></option>
		<?php
		  }
	      else
		  {
		?>  
		  <option value="<?php echo $j; ?>" selected><?php echo $j."-".$k; ?></option>
	 <?php  
	      }
	     $j++;
		 $k--;
	   } 
	 ?> 
      </select></td>
	</tr>
	<?php
	}
	?>
  </table>
</form>
</body>
</html>

Les agradeceria mucho una propuesta para solucionar el asuntillo este, pero de no tenerla, igual agradezco por lo menos que me digan si estoy soñando, desubicada o no se puede hacer lo que estoy intentando. Muchas Gracias a todos.

Saludos

caricatos · #2 (**permalink**) 27/07/2005, 01:03

Hola KarenFerreira:

La única forma de hacerlo es usando tecnología ajax, o usar ventanas (flotantes o inline)...

Date una vuelta por ese foro, y si te interesa dilo para que muevan allí tu mensaje.

Se trata de crear un objeto ajax (XMLHttpRequest) y recibir los datos en formato XML (parece que puede ser también en otros formatos), que se manipulan fácilmente.

Saludos

KarenFerreira · #3 (**permalink**) 27/07/2005, 07:14

Muchas gracias Caricatos, podria alguien mover este post al foro de AJAX?

caricatos · #4 (**permalink**) 28/07/2005, 01:29

Hola:

La petición al servidor debes hacerla creando un objeto ajax... yo suelo usar una variable global, por ejemplo "pedido"...

Código:

function pedirXML(sitio, respuesta)	{
	if (window.XMLHttpRequest)	{
		pedido = new XMLHttpRequest();
		pedido.onreadystatechange = respuesta;
		pedido.open("GET", sitio, true);
		pedido.send(null);
	}
	else
		if (window.ActiveXObject)	{
			pedido = new ActiveXObject("Microsoft.XMLHTTP");
			if (pedido)	{
				pedido.onreadystatechange = respuesta;
				pedido.open("GET", sitio, true);
				pedido.send();
			}
		}
}

La petición es preferible que sea a una página php que capte las variables con el método get, que escriba la cabecera XML y los datos los devuelva con esa estructura (un ejemplo lo puedes ver en el tema del contador: http://www.forosdelweb.com/f127/contador-ajax-317355/ )

Dime si te vas enterando para tratar de continuar.

Saludos

KarenFerreira · #5 (**permalink**) 28/07/2005, 08:48

Ok, enterada hasta donde vas, y ahora?

caricatos · #6 (**permalink**) 30/07/2005, 08:39

Siguiendo con el resumen:

Si te fiijas en la llamada, se trata de esta página: http://www.caricatos.net/scripts/act...r.php?sumar=si
Se crea la cabecera xml y se genera un documento xml normal...

Código:

  <?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?> 
- <pepe>
  <total>88</total> 
  </pepe>

Ahora veremos el segundo parámetro de la llamada, y no es otra cosa que una función que gestione los resultados...

Código:

function respuestaXMLCuenta()	{// 
	if (pedido.readyState == 4)	{
		if (pedido.status == 200)	{
			datoTraido = pedido.responseXML.documentElement;
			// éxito:
			nuevaCuenta = parseInt(datoTraido.getElementsByTagName('total')[0].firstChild.data);
			if (nuevaCuenta != cuenta)
				modificar(nuevaCuenta);
			setInterval("pedido = false; consultaContador()", 20000);
		}
		else	{
			alert("error\n" + pedido.statusText);
		}
	}
}

Ahora tienes que ver que la variable pedido es un objeto con características interesantes
las propiedades readyState y status, para comprobar el éxito de la llamada y responseXML es el documento en sí que se debe manejar con los métodos DOM (la verdad es que solo los había manejado con documentos html, pero revisando el ejemplo se puede ver como interpretarlo... al igual que con html documentElement es el nodo raiz, y a partir de ahí se puede acceder a los nodos hijos por getElementById o getElementsByTagName... firstChild... etc.

Saludos