Slide con Mootools pasando variables desde PHP

JCarrie · #1 (**permalink**) 18/08/2009, 18:35

Estimados, necesito un poco de inspiración por parte de ustedes. El título no habla por si mismo, así que intentaré explicar mi problema.

Tengo un php que genera "n" informes dependiendo de los que hayan en la base de datos. El código es el siguiente:

$link1 = ConnectDB();
if ($result = mysqli_query($link1, "select
cliente_codigo
, cliente_nombre
, fecha
, titulo
, comentario
, carpeta_seguimiento

from seg_informe where
cliente_codigo = '".$alm_cliente_codigo."' ;"))
{
while($row = mysqli_fetch_array($result))
{

$det_cliente_codigo = $row["cliente_codigo"];
$det_cliente_nombre = $row["cliente_nombre"];
$det_fecha = $row["fecha"];
$det_titulo = $row["titulo"];
$det_comentario = $row["comentario"];
$carpeta_seguimiento = $row["carpeta_seguimiento"];

/* Aqui va el contenido del panel que se repretira dependiendo de la busqueda */

echo '<table>';
echo ' <tr>';
echo ' <td>'.invertir_fecha($det_fecha).'</td>';
echo ' <td>'.$det_titulo.'</td>';
echo ' <td></td>';
echo ' </tr>';
echo ' <tr>';
echo ' <td>'.$det_comentario.'</td>';
echo ' </tr>';
echo '</table>';
}
etc...

Por cada vuelta del while se generará un informe y cada uno en su propia tabla.

Ahora, me gustaría que cada informe tuviera su panel contraible y para eso estoy usando Mootools. El problema que tengo es en el código del slide:

window.addEvent('domready', function() {
var myVerticalSlide = new Fx.Slide('vertical_slide');
$('v_toggle').addEvent('click', function(e){
e.stop();
myVerticalSlide.toggle();
});

la variable $('v_toggle') es la que recibe desde php como por ejemplo:

echo '<a id="v_toggle" href="#">Abrir/Cerrar</a>';

Por cada llamada de este último echo el id="v_toggle" debe corresponder con la variable $('v_toggle') del script para que funcione el efecto.

Si genero una serie id="v_toggle" a través de un ciclo:

id="v_toggle1"
id="v_toggle2
... etc"

Como puedo hacer para que en el script se generen las mismas variables en forma automática:

$('v_toggle1')
$('v_toggle2')
...etc

Espero haberme explicado bien.

Saludos y gracias por sus comentarios.

masterpuppet · #2 (**permalink**) 19/08/2009, 04:56

una solución podria se esta:

Código PHP:

  $$('.v_toggle').each(function(el){

    fx = new Fx.Slide(el.getNext());

    el.addEvent('click', function(e){

        e.stop();

        this.toggle();

    }.bind(fx));

});

la contra de esto es que esta atado a la escructura del html, tendria que ser asi:

Código HTML:

<a href="#" class="v_toggle">Toggle</a>
<table>
   <tr><td></td></tr>
</table>
<a href="#" class="v_toggle">Toggle</a>
<table>
   <tr><td></td></tr>
</table>

si asi no te sirve, tendrias que tener relacionados los links con las tablas
por los id's.
salu2.

PD: no te sirve el accordion?

JCarrie · #3 (**permalink**) 19/08/2009, 07:38

Gracias masterpuppet, lamentablemente no me funcionó.
Estoy probando con el acordión que me recomendaste y al parecer es mucho mejor para lograr el mismo efecto.
En un rato más cuento como me fue.

masterpuppet · #4 (**permalink**) 19/08/2009, 07:45

Raro que no te funcione a mi me va bien, si posteas el codigo generado, es mas facil ver que te puede estar pasando.
salu2.

JCarrie · #5 (**permalink**) 19/08/2009, 09:26

Me fue muy bien con el abanico, funciona perfectamente. En todo caso me gustó más el toogle que estaba haciendo y me interesa mucho saber en que estaba fallando y creo que será bueno si alguien más tiene el mismo problema.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="css/informes.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="demo.css" type="text/css" />
<script type="text/javascript" src="scripts/mootools.js"></script>
<script type="text/javascript" src="scripts/aplicacion.js"></script>

<title>Informe de seguimiento</title>
</head>

<body>
<?php
include_once("connect.php");
include_once("funciones.php");

//if($_GET["cliente_codigo"])
// $alm_cliente_codigo=$_GET["cliente_codigo"];
$alm_cliente_codigo=5;

$link1 = ConnectDB();

if ($result = mysqli_query($link1, "select
cliente_codigo
, cliente_nombre

from seg_cliente

where
cliente_codigo = '".$alm_cliente_codigo."'
;"))
{
while($row = mysqli_fetch_array($result))
{
$cliente_nombre = $row["cliente_nombre"];
}

mysqli_free_result($result);
}
else
{
echo mysqli_error($link1)."<br>";
}

mysqli_close($link1);

// Header
echo '<table>';
echo ' <tr>';
echo ' <td><img src="img/informes_de_servicio.gif" alt="Informes de Servicio"></td>';
echo ' </tr>';
echo '</table>';

// Nombre de cliente
echo '<table class="top_aplicacion">';
echo ' <tr>';
echo ' <td>Cliente: '.$cliente_nombre.'</td>';
echo ' <td align="right"><a href="../clientes.php">Salir</td>';
echo ' </tr>';
echo '</table>';

// Busca el máximo de informes
$cont_inv = 0;

$link1 = ConnectDB();
if ($result = mysqli_query($link1, "select
cliente_codigo
from seg_informe
where
cliente_codigo = '".$alm_cliente_codigo."'
;"))
{
while($row = mysqli_fetch_array($result))
{
$cont_inv = $cont_inv + 1;
}
mysqli_free_result($result);
}
else
{
echo mysqli_error($link1)."<br>";
}
mysqli_close($link1);

// Armar los paneles

$link1 = ConnectDB();

if ($result = mysqli_query($link1, "select
cliente_codigo
, cliente_nombre
, fecha
, titulo
, comentario
, carpeta_seguimiento

from seg_informe

where
cliente_codigo = '".$alm_cliente_codigo."'
;"))
{
while($row = mysqli_fetch_array($result))
{

$det_cliente_codigo = $row["cliente_codigo"];
$det_cliente_nombre = $row["cliente_nombre"];
$det_fecha = $row["fecha"];
$det_titulo = $row["titulo"];
$det_comentario = $row["comentario"];
$carpeta_seguimiento = $row["carpeta_seguimiento"];

/* Aqui va el contenido del panel que se repretira dependiendo de la busqueda */

echo '<table>';
echo ' <tr>';
echo ' <td><a id="v_toggle" href="#">'.invertir_fecha($det_fecha).' - '.$det_titulo.'</a></td>';
echo ' </tr>';
echo ' <tr>';
echo ' <td><div id="vertical_slide">'.$det_comentario.'</div></td>';
echo ' </tr>';
echo '</table>';

}
mysqli_free_result($result);
}
else
{
echo mysqli_error($link1)."<br>";
}

mysqli_close($link1);

?>
</body>
</html>

Y el archivo aplicacion.js contiene:

window.addEvent('domready', function() {

var myVerticalSlide = new Fx.Slide('vertical_slide');

$('v_toggle').addEvent('click', function(e){
e.stop();
myVerticalSlide.toggle();
});

El script se genera bien, el problema es que el efecto de abrir y cerrar solo se produce en la primera vuelta del ciclo, desde el segundo en adelante se mantiene fijo.

Saludos y gracias por tu ayuda.

masterpuppet · #6 (**permalink**) 19/08/2009, 11:19

Código PHP:

  var sliders = $$('.vertical_slide');

$$('.v_toggler').each(function(el, i){

    fx = new Fx.Slide(sliders[i]);

    el.addEvent('click', function(e){

        e.stop();

        this.toggle();

    }.bind(fx));

});

aca te lo cambie un poco para que funcione con tu html.
tenes que modificar en los links id="v_toggle" por class="v_toggle" lo mismo con id="vertical_slide" por class="vertical_slide".
salu2.

JCarrie · #7 (**permalink**) 30/08/2009, 21:16

Gracias masterpuppet, me funciona perfectamente. Lamentablemente no lo pude poner en práctica ya que al parecer lightbox (jquery) no es compatible con Mootools, los dos juntos no funcionan y por separado ningún problema.

En todo caso el sitio quedóa impecable y usaré lo visto en este tema en otro proyecto que tengo en mente.

Saludos a todos.
PD. no se como se cierra el tema.

Krato · #8 (**permalink**) 31/08/2009, 02:04

Si que pueden coexistir los dos juntos.

Tan solo es necesario que pongas esta linea:

Código HTML:

jQuery.noConflict()

Y que después sustitutas los "$" de jquery con la palabra "jQuery" con la Q mayuscula y debería funcionar.

Un saludo!