0

estoy desarrollando un proyecto de un sitio web de unos platillos, estoy usando html, csss y javascript, aparte de eso uso tambien PHP, quisiera saber como puedo hacer para que cuando el usuario le de en "Más detalles" sin importar que tarjeta sea muestre informacion de dicha tarjeta, el codigo que tengo de la modal y como llamo los datos de la base de datos es este:

<div class="ContainerCards">
    <?php $resultado = mysqli_query($conexion, $platillos);
    while($row=mysqli_fetch_assoc($resultado)) { ?>
    <div class="card" style="width: 18rem;">
    <img src="data:image/jpg/png/jpeg;base64,<?php echo base64_encode($row['Foto_Platillo']); ?>">
        <div class="card-body">
            <h5 class="card-title"><?php echo $row["Nombre_Platillo"] ?></h5>
            <p class="card-text">$<?php echo $row["Precio_Platillo"] ?></p>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
            Más Detalles
            </button>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                        <?php echo $row["Nombre_Platillo"] ?>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <?php echo $row["Descripcion_Platillo"] ?>
                </div>
                <div class="modal-body">
                    <?php echo $row["Precio_Platillo"] ?>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Salir</button>
                </div>
                </div>
            </div>
        </div>
    </div>
    <?php } ?>
</div>

La consulta que le hago a la base de datos:

include("conexion.php"); $platillos = "SELECT * FROM platillos";

ahora bien cuando yo le doy a cualquier tarjeta solo me muestra la informacion de la primera, como podria hacer que al darle en "más detalles" me muestre la informacion no solo de la primera si no del resto sin importar en cual tarjeta le de al boton de "más detalles".

Agradeceria un monton la ayuda.

1 respuesta 1

0

Tal como lo estas haciendo estas llenado el código de "modales", pero solo llamas al primero con esto:

data-bs-target="#exampleModal"

La solución es usar un id único en lugar de repetir el id en cada ciclo aquí:

<div class="modal fade" id="exampleModal" 

Un método posible sería usar un contador en el bucle, iniciándolo antes de su ejecución así:

$contador = 0;

y dentro del ciclo irlo aumentando así:

$contador++;

y usarlo así en los dos casos que he dicho al principio:

data-bs-target="#exampleModal<?=$contador?>"

y

<div class="modal fade" id="exampleModal<?=$contador?>" 

y con eso consigues que sean únicos y que los botones apunten correctamente a cada uno de ellos de forma certera.

Tal como pides en los comentarios, te paso todo completo ya implementado:

<div class="ContainerCards">
    <?php
    $resultado = mysqli_query($conexion, $platillos);
    $contador = 0;
    while($row=mysqli_fetch_assoc($resultado)) { 
        $contador++;
        ?>
    <div class="card" style="width: 18rem;">
    <img src="data:image/jpg/png/jpeg;base64,<?php echo base64_encode($row['Foto_Platillo']); ?>">
        <div class="card-body">
            <h5 class="card-title"><?php echo $row["Nombre_Platillo"] ?></h5>
            <p class="card-text">$<?php echo $row["Precio_Platillo"] ?></p>
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal<?=$contador?>">
            Más Detalles
            </button>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="exampleModal<?=$contador?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            
            <div class="modal-dialog">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">
                        <?php echo $row["Nombre_Platillo"] ?>
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <?php echo $row["Descripcion_Platillo"] ?>
                </div>
                <div class="modal-body">
                    <?php echo $row["Precio_Platillo"] ?>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Salir</button>
                </div>
                </div>
            </div>
        </div>
    </div>
    <?php } ?>
</div>
2
  • Me podrias mostrar como se implemente, porque no se si de la manera en que plantee esta solucion fue erronea porque cuando recargo la pagina me muestra solo una card vacia y al darle en el modal me lo muestra vacio igualmente.
    – David2154
    Commented el 11 oct. 2022 a las 22:35
  • Acabo de agregarlo a la respuesta. Actualiza la página si no lo ves.
    – masterguru
    Commented el 11 oct. 2022 a las 22:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.