Datos de la base en Pop Up Jquery

[NnikoO]

Hola gente, estoy haciendo un sistema de productos que se cargan desde la base de datos, similar a un carro de compras. Conecto con la base, y por medio de un while traigo todos los productos que se hayan cargado desde el Admin, generando así una lista con todos estos, de los cuales aparece el nombre, una descripción breve, el precio, y una foto miniatura. Hasta acá todo funciona de maravilla.

La foto miniatura es un link para acceder a mas información del producto seleccionado, que por medio de Jquery, hago que se muestre dentro de un Pop up. He aquí el problema. Dentro de este cuadro aparece nuevamente el nombre del producto, junto con una descripción mas extensa, una foto mas grande, y demás información. La carga funciona bien, todo se muestra tal cual como debe ser, pero, muestra la misma información en todos los productos, es decir, la información es siempre la del primer producto de la lista, y esta se repite en el Pop Up de cada uno de los demás.

Acá les dejo el código con la conexión a la base de datos, y la carga de los datos:

Código PHP:

  <? 
session_start(); 
$_SESSION["autorizado"]; 
 
if ($_SESSION["validar"] != "autorizado") { 
     
    $comprar = ""; 
}     
else 
{ 
    $comprar = "<a href='#'>Comprar</a>"; 
} 
 
 
 
        include("config.php"); 
 
        $link = mysql_connect($servidor, $usuario, $pass) or die(mysql_error());         
                 
        $bd = mysql_select_db($basedato, $link) or die(mysql_error());         
         
        $sql = "    SELECT *  
                    FROM productos  
                    ORDER BY idProducto DESC"; 
        $resultado = mysql_query($sql, $link) or die(mysql_error());         
                 
?> 
 
<!-- Vinos Tintos --> 
<table width="760" border="0" cellpadding="5"> 
   <? 
                          if($resultado) 
                        { 
                            while($r = mysql_fetch_array($resultado)) 
                            { 
                    ?> 
    <tr> 
        <td> 
            <div class="contenedor_productos"> 
                <a href="#?w=600?id=<? echo $r['idProducto']; ?>" rel="desc_vinos" class="poplight"> 
                    <img src="galeriamini/<? echo $r['fotomini'];?>" width="75" height="75" alt="Vino 01" /> 
                </a> 
                <div id="desc_vinos" class="popup_block"> 
                    <h1><? echo $r['nombre']  ;?></h1> 
                    <img src="galeria/<? echo $r['foto'];?>" width="230" height="225" alt="Trapiche" /> 
                    <h2><? echo $r['bodega'] ;?></h2> 
                    <p><? echo $r['descripcion'];?></p>                                             
                </div>                                 
                <p><span><? echo $r['nombre'] ;?></span>, <? echo $r['breve'] ;?></p> 
                <p><b>Precio:</b> $ <? echo $r['precio'] ;?></p> 
                <? echo $comprar; ?> 
            </div> 
        </td> 
    </tr> 
<?        } 
                                } 
                              ?> 
</table>  

Creo, por lo que yo puedo llegar a deducir desde mi lógica, que cada vez que abro un Pop Up, sea del producto que sea, trae de la base de datos siempre la información del primer producto, haciendo esto con cada uno de los demás.

Un solución que pensé, pero que no pude hacer andar, seria por medio de la id del producto (en la base existe un campo "idProducto"), que al abrir el Pop Up, se pase esta "id", y que se use como indicador a la hora de cargar los datos que correspondan justamente a esta.

Espero que puedan ayudarme de alguna forma, porque es lo unico que me falta para poder avanzar considerablemente en el trabajo. Muchas gracias de antemano.
Un abrazo.

<< niko >>

[Patriarka]

tenes dos soluciones:
crear un popup x cada producto o cambiar el innerHTML del popup con con los nuevos datos.

en elk codigo que dejaste no veo donde se genera el popup

[NnikoO]

El código del Pop Up esta en la sección productos, donde según que categoría se elije hay un include que llama a la página correspondiente. El código que puse es justamente el de una de estas páginas.

[NnikoO]

Si queres subo la página de productos, donde esta el código del Pop Up...

[Patriarka]

dale, pero ya te di posibles soluciones

[NnikoO]

Igual no comprendo como generar un pop up por cada producto, porque la cantidad varia, no son fijos, los productos se cargan o se borran desde un admin. Yo lo que hago es generar justamente el popup por cada producto que se cargue, el tema es que en estos siempre toma los datos del ultimo producto cargado.

Aca te dejo el código "resumido" de productos.php:

Código PHP:

<!--[if lte IE 6]>
<script type="text/javascript" src="js/supersleight-min.js"></script>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel');
        var popURL = $(this).attr('href');              
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1];
        $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="imagenes/cerrarpopup.jpg" class="btn_close" title="Cerrar" alt="Cerrar" /></a>');
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;
        $('#' + popID).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });
        $('body').append('<div id="fade"></div>');
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
        
        return false;
    });
    $('a.close, #fade').live('click', function() {
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();  
    });     
        return false;
    });
});
</script>
<script type="text/javascript">
$(document).ready(function() {
    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_content:first").show();
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();
        return false;
    });
});
</script>
</head>
 
<body>
 
                    <div class="tab_container">
<!-- Vinos Tintos -->
                        <div id="vinos_tintos" class="tab_content">
                            <div class="titulos_productos"><img src="imagenes/titulo_vinostintos.png" width="117" height="24" alt="Vinos Tintos" /></div>
                            <?php include("tintos.php"); ?>
                        </div>
<!-- Vinos Blancos -->
                        <div id="vinos_blancos" class="tab_content">
                            <div class="titulos_productos"><img src="imagenes/titulo_vinosblancos.png" width="139" height="24" alt="Vinos Blancos" /></div>
                            <?php include("blancos.php"); ?>
                        </div>
<!-- Vinos Rosados -->
                        <div id="vinos_rosados" class="tab_content">
                            <div class="titulos_productos"><img src="imagenes/titulo_vinosrosados.png" width="138" height="24" alt="Vinos Rosados" /></div>
                            <?php include("rosados.php"); ?>
                      </div>
<!-- Vinos Espumantes -->
                        <div id="vinos_espumantes" class="tab_content">
                            <div class="titulos_productos"><img src="imagenes/titulo_vinosespumantes.png" width="170" height="34" alt="Vinos Espumantes" /></div>
                            <?php include("espumantes.php"); ?>
                        </div>
<!-- Whisky -->
                        <div id="whisky" class="tab_content">
                            <div class="titulos_productos"><img src="imagenes/titulo_whisky.png" width="76" height="32" alt="Whisky" /></div>
                            <?php include("whisky.php"); ?>
                        </div>
<!-- Destilados y Aperitivos -->
                        <div id="destilados_aperitivos" class="tab_content">
                        <div class="titulos_productos"><img src="imagenes/titulo_destiladosaperitivos.png" width="231" height="37" alt="Destilados y Aperitivos" /></div>
                            <?php include("destilados.php"); ?>
                        </div>
                    </div>                  
                </div>
 
</body>
</html>
 

[Eleazan]

Yo creo que el problema lo tienes en esta línea de aqui:

Código PHP:

 <a href="#?w=600?id=<? echo $r['idProducto']; ?>" rel="desc_vinos" class="poplight">  

Si te fijas, estás pasando mal los parámetros.
Debería ser así

Código PHP:

 <a href="#?w=600&id=<? echo $r['idProducto']; ?>" rel="desc_vinos" class="poplight">  

Prueba, y comentas ^^


Edito: releyendo bien tu código, si cambias eso no producirá ningún cambio.

Tu problema es el siguiente:

Tu "popup" muestra el de un ID en concreto (el q le pasas mediante el parámetro "rel" del enlace). Es decir, tu pones

Código HTML:

<a href="#?w=123" rel="un_id_cualquiera" class="poplight">
 

Y tu "popup" usará el width 123, y te mostrará el div "un_id_cualquiera" que tenías oculto.

Ese es el funcionamiento básico. ¿Cual es tu problema?

Tienes, por ejemplo, para todos los vinos el div con id "desc_vinos", lo cual, es incorrecto pq repites ID's. Y ademas, todos los enlaces que te abren el popup van al rel="desc_vinos". ¿Cuál es la solucion?

Deberias añadir al ID de cada div, el ID del vino en cuestión (por ejemplo), y en el enlace, en el atributo rel tb. Así, probablemente, solucionaria el error de que siempre carga el mismo. Sería algo así:

Código PHP:

 <!-- Vinos Tintos --> 
<table width="760" border="0" cellpadding="5"> 
   <? 
                          if($resultado) 
                        { 
                            while($r = mysql_fetch_array($resultado)) 
                            { 
                    ?> 
    <tr> 
        <td> 
            <div class="contenedor_productos"> 
                <a href="#?w=600?id=<? echo $r['idProducto']; ?>" rel="desc_vinos_<?php echo $r['idProducto']; ?>" class="poplight"> 
                    <img src="galeriamini/<? echo $r['fotomini'];?>" width="75" height="75" alt="Vino 01" /> 
                </a> 
                <div id="desc_vinos_<?php echo $r['idProducto']; ?>" class="popup_block"> 
                    <h1><? echo $r['nombre']  ;?></h1> 
                    <img src="galeria/<? echo $r['foto'];?>" width="230" height="225" alt="Trapiche" /> 
                    <h2><? echo $r['bodega'] ;?></h2> 
                    <p><? echo $r['descripcion'];?></p>                                             
                </div>                                 
                <p><span><? echo $r['nombre'] ;?></span>, <? echo $r['breve'] ;?></p> 
                <p><b>Precio:</b> $ <? echo $r['precio'] ;?></p> 
                <? echo $comprar; ?> 
            </div> 
        </td> 
    </tr> 
<?        } 
                                } 
                              ?> 
</table>  

Yo creo q así debería funcionar :)


PD: Lo más fácil, habria sido que el popup te cargara una dirección en plan "detalle.php?id=123" por ejemplo... pero ya que lo tienes de otra forma, te he dado la solución (creo) a lo que tienes escrito!

[NnikoO]

Muchísimas gracias la verdad! Recién probé a la pasada y funciona, espero que siga así. El tema es que todo esta dispuesto así porque la pagina la diseño un compañero mio, me toco hacerle la programación nomas. Si hubiera tenido que diseñarla yo la habría hecho de forma diferente, pero bueno, son problemas con los que nos topamos siempre. De nuevo muchas gracias!