Caja desplegable con contenido dinámico

noruas · #1 (**permalink**) 17/06/2012, 06:29

Hola.

Tengo un sencillo documento php que muestra una lista de clientes extraidas de una tabla sql y un script en Jscript que he agarrado de un post de este mismo foro que lo que hace es que: al hacer click en un boton despliegue o esconda una caja que tiene debajo.

El problema es que el contenido es dinamico, y genera muchas cajitas, una por cada cliente por lo que el script no es capaz de saber que caja ha de desplegar ya que todas tienen el mismo ID...

A ver si alguien puede hecharme un cable y decirme como generar un id independiente a cada caja y que el boton correspondiente se refiera a ese id generado.

El documento que tengo es el siguiente:

Código:

<html>
 <head>
  <script>
    function capa()
    {
      var estilo = document.getElementById("capa").className;
      if (estilo == "hidden")
      {
        document.getElementById("capa").className = "show";
      }
      else
      {
        document.getElementById("capa").className = "hidden";
      }
    }
  </script>
  <style type="text/css">
   .hidden {height:0px; width:300px; display:none;}
   .show {height:auto; display:inherit; width:300px;}
  </style>
 </head>
 <body>
 <?php
   include("conex.phtml");
   $link=Conectarse();
   $result=mysql_query("SELECT * FROM clientes",$link);
 ?>
 <?php      
		while($row = mysql_fetch_array($result)) {
			echo '
			   // Boton para desplegar
			   <input type="button" name="boton" id="boton" value="Desplegar" onClick="capa()" />
			   
			   // Capa que se despliega
			   <div id="capa" class="hidden">
			   
				 <ul>
					<li><span>Cliente: </span>'.$row["apellidos"].', '.$row["nombre"].'</li>
					<li><span>NIF: </span>'.$row["dni"].'</li>
					<li><span>Dirección: </span>'.$row["direccion"].'</li>
				 </ul>
				 
			   </div>
			     ';
	}
   mysql_free_result($result);
   mysql_close($link);
 ?>
 </body>
</html>

Saludos.

cuasatar · #2 (**permalink**) 17/06/2012, 08:56

Cita:

El problema es que el contenido es dinamico, y genera muchas cajitas, una por cada cliente por lo que el script no es capaz de saber que caja ha de desplegar ya que todas tienen el mismo ID...

A ver si alguien puede hecharme un cable y decirme como generar un id independiente a cada caja y que el boton correspondiente se refiera a ese id generado.

Bueno, no tengo muy claro que es lo que quieres hacer exactamente pero lo primero que toca hacer es simple y llanamente es crear un campo id unico para cada cliente, es claro que si no tienes algo como diferenciarlos jamas vas a lograr lo que te propones.

En segundo lugar digamos que quieres ver la información del cliente pepito. Lo que podrias hacer es generar un listado con todos los clientes posibles y si quieres para que se vea mas elegante sin recargar la página podrias usar ajax. De esa manera mandarias el id unico y la consulta sql la harias basada en ese unico cliente y mostrarias solo esa caja.

No se si entendi o no tu problema, pero espero que sea de utilidad mi idea, sino cualquier cosa ya nos comentaras.

noruas · #3 (**permalink**) 17/06/2012, 09:21

Vale ya he entendido lo que dices y si funciona, haciendo eso agrega el id del cliente como id de la caja y lo mismo para el boton. El problema es como meto eso en la funcion Jscript de arriba...

Lo que he hecho es:

Código:

while($row = mysql_fetch_array($result)) {
			$idCaja=$row["idCliente"];
			echo '
			   <!--Boton para desplegar-->
			   <input type="button" name="boton" id="boton" value="Desplegar" onClick="'.$idCaja.'()" />
			   
			   <!--Capa que se despliega-->
			   <div id="'.$idCaja.'" class="hidden">
			   
				 <ul>
					<li><span>Cliente: </span>'.$row["apellidos"].', '.$row["nombre"].'</li>
					<li><span>NIF: </span>'.$row["dni"].'</li>
					<li><span>Dirección: </span>'.$row["direccion"].'</li>
				 </ul>
				 
			   </div>
			     ';
	}

Pero claro, la funcion del Jscript tambien habria que cambiar:
document.getElementById("capa")
Por la id... Pero eso ya no se como hacerlo

zalito12 · #4 (**permalink**) 17/06/2012, 09:38

Puedes probar algo así en el php:

Código PHP:

  <?php      
$i = 0;
        while($row = mysql_fetch_array($result)) {
            echo '
               // Boton para desplegar
               <input type="button" name="boton" id="'.$i.'" value="Desplegar" onClick="capa('.$i.')" />
               
               // Capa que se despliega
               <div id="capa'.$i.'" class="hidden">
               
                 <ul>
                    <li><span>Cliente: </span>'.$row["apellidos"].', '.$row["nombre"].'</li>
                    <li><span>NIF: </span>'.$row["dni"].'</li>
                    <li><span>Dirección: </span>'.$row["direccion"].'</li>
                 </ul>
                 
               </div>
                 ';
$i++;
    }
   mysql_free_result($result);
   mysql_close($link);
 ?>

Y así en la funcion de JS:

Código:

<script>
    function capa(num)
    {
      var estilo = document.getElementById("capa"+num).className;
      if (estilo == "hidden")
      {
        document.getElementById("capa"+num).className = "show";
      }
      else
      {
        document.getElementById("capa"+num).className = "hidden";
      }
    }
  </script>

Debería funcionar aunque la solución es un poco a lo bestia, no quiero decir que esté mal, pero seguro que alguien encuentra alguna forma más delicada :D

noruas · #5 (**permalink**) 17/06/2012, 09:58

EDITO: Si que va.

Muchisimas gracias Zalito12 ^^, si tu me dices que la solucion es algo bestia, lo será... Pero me funciona a la perfección

Saludos

.

zalito12 · #6 (**permalink**) 17/06/2012, 12:23

Debería funcionar, acabo de probar el código y a mi me va, bueno he de decir q lo he modificado un poco para hacer la prueba más facilmente:

Código:

<html>
<body>

<script>
    function capa(num)
    {
      var estilo = document.getElementById("capa"+num).style;  
      if (estilo.display == "none")
      {
        estilo.display = "block";
      }
      else
      {
        estilo.display = "none";
      }
    }
  </script>
            <div id="capa1"><a href="#" onclick="capa(1)">capa1</a></div>
            <div id="capa2"><a href="#" onclick="capa(2)">capa1</a></div>
  </body>
  </html>

]

noruas · #7 (**permalink**) 17/06/2012, 18:04

Si, claro que funciona... Fue error mio al copiar xD.

Edite el mensaje pero me parece que por las horas en la que lo edite y por la que respondistes no te dio tiempo a leer mi edicion xDDD.

Gracias nuevamente ^^.