[SOLUCIONADO] popup ids en javascript con php

[JeMaGa]

Buenos Dias
Tengo un inconveniente y no le he dado con el chiste creo que es una tontería que estoy pasando por alto pero ya revise e intente de diferentes formas y no he podido. agradezco la ayuda que me pueden brindar.

Yo consulto una tabla de capacitaciones y me genera todas las capacitaciones necesito que al dar clic en el nombre de la capacitación muestre la información de esa capacitación en un popup, pero cuando realizo esto en javascript solo me funciona para primera capacitación ya para el resto de las capacitaciones no me abre el popup

Lo que estoy haciendo aqui es por cada resultado me muestre un popup, lo que yo habia puesto es el id+id de mi tabla para identificar el popup

Código PHP:

  <?php
 $sqlCapa = 'select * from capacitaciones';
            $ejesqlCapa = mysqli_query($con, $sqlCapa) or die('Error en la consulta de la capacitacion ' . mysqli_error($con));
            
            while ($rows = mysqli_fetch_array($ejesqlCapa)) {
                ?>
            <input type="hidden" value="<?php echo $rows['idCapacitacion'] ?>" id="idtxt"/>
                <div id="header2" style="background-image: url(<?php echo $rows['imagen']; ?>) ;">
                    <a href="#" id="open<?php echo $rows['idCapacitacion'] ?>" class="nombreCap"><br>
                        <?php echo utf8_decode($rows['nomCapacitacion']); ?>
                    </a>
                </div>
                <div id="popup<?php echo $rows['idCapacitacion'] ?>" style="display: none;">
                    <div class="content-popup">
                        <div class="close<?php echo $rows['idCapacitacion'] ?>"><a href="#" id="close"><img src="images/close.png"/></a></div>
                        <div>
                            <?php
                            echo '<span id="descCapa">Descripcion: <br>' . utf8_decode($rows['descripcion']) . '</span><br><br>';
                            echo '<span id="descCapa">Responsable: <br>' . $rows['responsableCapa'] . '</span><br><br>';
                            echo '<span id="descCapa">Fecha - Hora: <br>' . $rows['fechaCapacitacion'] . ' - ' . $rows['horaCapacitacion'] . '</span><br>';
                            ?>
                        </div>
                    </div>
                </div>
                <?php
            }   

y en la parte del javascript resivo el valor del campo de texto y lo concateno con el id dell popup

Código Javascript:

$(document).ready(function () {
    var id = $('#idtxt').val();
    if (id != '') {
        $('#open' + id).click(function () {
            $('#popup' + id).fadeIn('slow');
            $('body').css('opacity', '0.9');
//            return false;
            alert('valor de ' + id + 'if');
        });
 
        $('#popup' + id).mouseleave(function () {
            $('#popup' + id).fadeOut('slow');
            $('body').css('opacity', '1');
            return false;
        });
 
        $('#close' + id).click(function () {
            $('#popup' + id).fadeOut('slow');
            $('body').css('opacity', '1');
            return false;
        });
    } else {
        alert('no tiene ' + idv + 'else');
    }
});
 

gracias por la ayuda que me puedan brindar

[pateketrueke]

El problema más evidente es que repites los mismos ID's por cada registro dentro del while, y hecho así jamás funcionará de otro modo.

Debes entender que los ID's deben ser únicos, y al parecer repites muchas veces los mismos, ese es tu principal error.

[JeMaGa]

Gracias por tu respuesta pero lo que pasa es que cada bloque tiene el mismo id de la base de datos pero id del elemento es diferente ejemplo

Código PHP:

  
//Ejemplo 
<a href="#" id="open1" class="nombreCap"></a>
<div id="popup1"></div>
<div class="close1"></div>

<a href="#" id="open<?php echo $rows['idCapacitacion'] ?>" class="nombreCap"></a> // div principal cuando le de clic me debe buscar popup que muestra informacion
<div id="popup<?php echo $rows['idCapacitacion'] ?>" ></div> // este el popup en este muestra la informacion del  div anterior
<div class="close<?php echo $rows['idCapacitacion'] ?>"></div> // y este cierra el div que contiene la informacion.  

asi por cada uno de los registros que devuelve la base de datos, pero solo me funciona para el primer resultado

[pateketrueke]

¿Y el #idtxt y los #descCapa qué?

Entiende que tu script usa #idtxt pero como lo tienes repetido, bueno, creo que ya entiendes.

[JeMaGa]

Lo que pasa es que el campo de texto idtxt vendría siendo un arreglo por que me va a contener 1,2,3 y así sucesivamente va a tener muchos valores como le puedo pasar este a javascript para ahí si empezar a recorrer cada posición pero desde javascript

[JeMaGa]

#idtxt contiene los id's de la consulta pero esto vendria siendo un arreglo necesitaria procesar ese arreglo en el javascript

#idtxt en el value va tener 1,2,3,4 .....

[pateketrueke]

Iniciado por JeMaGa

#idtxt contiene los id's de la consulta pero esto vendria siendo un arreglo necesitaria procesar ese arreglo en el javascript

#idtxt en el value va tener 1,2,3,4 .....

Por eso te lo digo, estás repitiendo dicho ID tantas veces como registros tengas en el while.

¿Qué cosa es la que no entiendes?

Es obvio que mientras repitas dicho ID tu código de Javascript no funcionará, porque al repetir un ID no puedes esperar a obtener todos los elementos con el mismo ID.

Pensé que eso ya lo tenías claro.

[JeMaGa]

Por eso estoy manejando id's diferentes por regisro devuelto

iria asi primer registro devuelto

#idtxt ---> Valor del campo es 1
<a href="#" id="open1" class="nombreCap"></a> --> el id del <a href> es open1
<div id="popup1"></div> --> el id del primer <div> es popup1
<div class="close1"></div> --> el id del segundo <div> es close1

---------- iria asi segundo registro devuelto

#idtxt ---> Valor del campo es 2
<a href="#" id="open2" class="nombreCap"></a> --> el id del <a href> es open2
<div id="popup2"></div> --> el id del primer <div> es popup2
<div class="close2"></div> --> el id del segundo <div> es close2

y asi sucesivamente

[JeMaGa]

mi idea es pasar todos los valores que contenga #idtxt a javascript para así poderlo procesar

[JeMaGa]

o lo puedo plantear de otra forma, por que lo que yo necesito es que

al dar clic en el primer <a href> que tiene como id-->open1, abra la informacion del <div> con id-->popup1

al dar clic en el segundo <a href> que tiene como id-->open2, abra la informacion del <div> con id-->popup2

al dar clic en el tercer <a href> que tiene como id-->open3, abra la informacion del <div> con id-->popup3

todo esto lo genera un while de php, pero entonces nose me ocurre de que otra foorma puedo hacer esto

[JeMaGa]

Listo lo solucione creo que el problema ni siquiera era de php lo esta haciendo mal en el javascript me estaba complicando mucho la vida

en el php lo que hice fue pasar un onclick a una funcion que recibía como parámetro el idCapacitacion

y el el javascript si lo procesaba

Código PHP:

 <a href="#" id="open<?php echo $rows['idCapacitacion'] ?>" onclick="abrir(<?php echo $rows['idCapacitacion'] ?>)"></a>  

y en el javascript

Código Javascript:

function abrir(tipo) {
    $('#popup' + tipo).fadeIn('slow');
    $('body').css('opacity', '0.9');
    return false;
}
 
function cerrar(tipo) {
    $('#close' + tipo).click(function () {
        $('#popup' + tipo).fadeOut('slow');
        $('body').css('opacity', '1');
        return false;
    });
}
 

[NSD]

Podrias usar algo asi:

Código PHP:

<?php
    $resultado = mysqli_query($con, "select * from capacitaciones")
        or die("Error en la consulta de la capacitacion " . mysqli_error($con));
 
    while($registro = mysqli_fetch_array($resultado))
    {
        echo "<div class=\"header2\" style=\"background-image: url({$registro['imagen']});\">
                <a href=\"#\" class=\"nombreCap open_popup\" data-info=\"".str_replace('"', '\\"', json_encode($registro))."\">
                    <br>".utf8_decode($registro['nomCapacitacion'])."
                </a>
              </div>";
    }
?>
    <div id="popup_info" style="display: none;">
        <div class="content-popup">
            <div class="close">
                <a href="#">
                    <img src="images/close.png"/>
                </a>
            </div>
            <div>
                <div class="descCapa">
                    Id:
                    <div id="info_popup_idCapacitacion"></div>
                </div>
                <div class="descCapa">
                    Descripcion:
                    <div id="info_popup_descripcion"></div>
                </div>
                <div class="descCapa">
                    Responsable:
                    <div id="info_popup_responsableCapa"></div>
                </div>
                <div class="descCapa">
                    Fecha - Hora:
                    <div>
                        <span id="info_popup_fechaCapacitacion"> - <span id="info_popup_horaCapacitacion">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function () {
            $(".open_popup").click(function () {
                $("#popup_info").fadeIn('slow');
                $("body").css('opacity', '0.9');
                var data_info = JSON.parse($(this).data("info"));
                for(var prop in data_info)
                    $("#popup_info #info_popup_"+prop).html(data_info[prop]);
            });
    
            var close_popup = function () {
                $("#popup_info").fadeOut('slow');
                $("body").css('opacity', '1');
                return false;
            };
            $(".close").click(close_popup);
            $("#popup_info").mouseleave(close_popup);
        });
    </script>
 

si quieres mostrar mas datos en el popup solo tienes que agregar los id correspondientes y javascript los completara automaticamente.

[pateketrueke]

Listo lo solucione creo que el problema ni siquiera era de php lo esta haciendo mal en el javascript me estaba complicando mucho la vida

Totalmente de acuerdo.