TransWikia.com

Sacar datos de la fila de una imagen guardada en una base de datos al dar click en ella

Stack Overflow en español Asked by Manolo Ramírez on February 2, 2021

He sacado las imágenes de mi base de datos que estaban guardadas con el texto "coche.jpg" por pantalla y al darlas click sale un texto debajo, quiero que al dar click encima de una de ellas me saque la fila con los datos de esa imagen en el recuadro, con el while he conseguido que saque por pantalla todas las imágenes de la tabla, después igualo en la consulta la imagen de la tabla con el row[‘imagen’] pero al dar click en cualquiera de ellas solo me sale la última fila de la tabla y me he quedado atascado aquí, alguien sabe como solucionarlo, gracias.

<body>
    <figure>
        <div class="container">
            <div class="row mb-1 p-2">
                <h2 style="text-align:center">Vehículos</h2>
            </div>
            
            <div class="row mb-1 p-2">
                <a href="nuevovehiculo.php" class="btn btn-primary">Nuevo Vehículo</a>
            </div>
            
            <br>
            <script languague="javascript">
        function mostrar() {
            div = document.getElementById('flotante');
            div.style.display = '';
        }

        function cerrar() {
            div = document.getElementById('flotante');
            div.style.display = 'none';
        }
</script>
<?php
    require 'db.php';
    $usuario=$_SESSION["username"];
    $sql = "SELECT * FROM vehiculos where usuarios_username='$usuario'";
    $resultado = mysqli_query($con, $sql);
    
?>
<?php while($row = $resultado->fetch_array(MYSQLI_ASSOC)) {    extract($row);
?>
            <p><a href="javascript:mostrar();"><img style="width:200px; height:150px" src="images/<?php echo $row['imagen'];$img=$row['imagen']; ?>"></a></p>
            <?php } ?>

<article id="flotante" style="display:none;">
     <article id="close"><a href="javascript:cerrar();">cerrar</a></article>
            <div style="width: 100%" class="row table-responsive">
                <table class="table table-condensed table-striped">
                    <thead>
                        <tr>
                            <th>Imágen</th>
                            <th>Número de bastidor</th>
                            <th>Marca</th>
                            <th>Modelo</th>
                            <th>Homologación</th>
                            <th>Procedencia</th>
                            <th>Combustible</th>
                            <th>Precio Combustible</th>                            
                            <th>Usuario</th>                         
                        </tr>
                    </thead>
                    
                    <tbody>
                    <?php
    require 'db.php';
    $usuario=$_SESSION["username"];
    $sql = "SELECT * FROM vehiculos where usuarios_username='$usuario' and imagen='$img' ";
    $resultado = mysqli_query($con, $sql);
    
?>
                        <?php while($row = $resultado->fetch_array(MYSQLI_ASSOC)) {    extract($row);
?>
                            <tr>
                                <td><img src="images/<?php echo $row['imagen']; ?>"  class="img-rounded" width="50px" height="50px"/></td>
                                <td><img src="images/<?php echo $row['imagen']; ?>"  class="img-rounded" width="50px" height="50px"/></td>
                                <td><?php echo $row['num_bastidor']; ?></td>
                                <td><?php echo $row['marca']; ?></td>
                                <td><?php echo $row['modelo']; ?></td>
                                <td><?php echo $row['contr_homologacion'];?</td>
                                <td><?php echo $row['procedencia']; ?></td>
                                <td><?php echo $row['gasolina']; ?></td>
                                <td><?php echo $row['precio_gas']; ?></td>
                                <td><?php echo $row['usuarios_username']; ?></td>
                                <td><a href="#" data-href="eliminarvehiculo.php?num_bastidor=<?php echo $row['num_bastidor']; ?>" data-toggle="modal" data-target="#confirm-delete"><span class="glyphicon glyphicon-trash"></span></a></td>

                                <td><a href="#" data-href="eliminarvehiculo.php?num_bastidor=<?php echo $row['num_bastidor']; ?>" data-toggle="modal" data-target="#confirm-delete"><span class="glyphicon glyphicon-trash"></span></a></td>
                            </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </div>
        </div>
        </article>

Así es como he cambiado el código:

<figure>
        <div class="container">
            <div class="row mb-1 p-2">
                <h2 style="text-align:center">Vehículos</h2>
            </div>
            
            <div class="row mb-1 p-2">
                <a href="nuevovehiculo.php" class="btn btn-primary">Nuevo Vehículo</a>
            </div>
            
            <br>
 <script languague="javascript">
        var iPos = 0; // Variable global donde guardaremos el valor de $i (de PHP que se genera dentro de "Mostrar"

        function mostrar(pIPos) {
            iPos=pIPos;
            div = document.getElementById('flotante' + iPos);
            div.style.display = '';
        }

        function cerrar() {
            div = document.getElementById('flotante' + iPos); // Usamos el valor antes colocado
            div.style.display = 'none';
        }   
</script>
<?php
    require 'db.php';
    $usuario=$_SESSION["username"];
    $sql = "SELECT * FROM vehiculos where usuarios_username='$usuario'";
    $resultado = mysqli_query($con, $sql);
    
?>
<?php
    $i=0;
    while($row = $resultado->fetch_array(MYSQLI_ASSOC)) {
    extract($row); /* en lo personal este "extract" no le veo uses su resultado; desde luego en el código que compartes */
?>
    <p>
        <a href="javascript:mostrar(<?php echo $i; ?>);">
                <img style="width:200px; height:150px" 
                    src="images/<?php echo $row['imagen'];$img=$row['imagen']; ?>">
        </a>
    </p>
<?php $i++; } ?>
<?php
    require 'db.php';
    $usuario=$_SESSION["username"];
    $sql = "SELECT * FROM vehiculos where usuarios_username='$usuario' and imagen='$img' ";
    $resultado= mysqli_query($con, $sql);
    
?>
<article >
     <article id="close"><a href="javascript:cerrar(<?php echo $i; ?>);">cerrar</a></article>
            <div style="width: 100%" class="row table-responsive">
                <table class="table table-condensed table-striped">
                    <thead> 

                    <tr >
                            <th>Imágen</th>
                            <th>Número de bastidor</th>
                            <th>Marca</th>
                            <th>Modelo</th>
                            <th>Homologación</th>
                            <th>Procedencia</th>
                            <th>Combustible</th>
                            <th>Precio Combustible</th>                            
                            <th>Usuario</th>
                        </tr>
                    </thead>
                    
                    <tbody>
<?php
   $i=0;    
   while($row = $resultado->fetch_array(MYSQLI_ASSOC)) {
      extract($row); /* Idem de while anterior */
      /* A continuación los tr y contenidos del tbody */
?>


                            <tr id="flotante<?php echo $i; ?>" style="display:none;">
                                <td><img src="images/<?php echo $row['imagen']; ?>"  class="img-rounded" width="50px" height="50px"/></td>
                                <td><?php echo $row['num_bastidor']; ?></td>
                                <td><?php echo $row['marca']; ?></td>
                                <td><?php echo $row['modelo']; ?></td>
                                <td><?php echo $row['contr_homologacion']; ?></td>
                                <td><?php echo $row['procedencia']; ?></td>
                                <td><?php echo $row['gasolina']; ?></td>
                                <td><?php echo $row['precio_gas']; ?></td>
                                <td><?php echo $row['usuarios_username']; ?></td>
                                <td><a href="#" data-href="eliminarvehiculo.php?num_bastidor=<?php echo $row['num_bastidor']; ?>" data-toggle="modal" data-target="#confirm-delete"><span class="glyphicon glyphicon-trash"></span></a></td>
                            </tr>
                            <?php $i++;} ?>
                    </tbody>
                </table>
            </div>
        </div>
javascriptmysqlmysqliphp

One Answer

A tus funciones mostrar y cerrar agrega que reciban un parámetro (en este caso se considera es un valor entero).

Ahora, asumiendo que al ejecutar la sentencia $sql = "SELECT * FROM vehiculos where usuarios_username='$usuario'"; las dos veces que invocas $resultado = mysqli_query($con, $sql); devuelven los datos en el mismo orden. Declara e inicializa una variable (consideremos) $i=0 antes de cada while y al final de este incrementarlo (es decir $i++;).

Para cada vez que pones href="javascript:mostrar();" le agregas el valor de $i; tal que, quede algo así; href="javascript:mostrar(<?php echo $i; ?>);"; lo mismo para cerrar solo que como tienes un solo cerrar deberás cambiarlo para que sea en cada imagen.

Otra opción, dejando el parámetro en mostrar es realices lo siguiente:

var iPos = 0; // Variable global donde guardaremos el valor de $i (de PHP que se genera dentro de "Mostrar"

function mostrar(pIPos) {
    iPos=pIPos;
    div = document.getElementById('flotante' + iPos);
    div.style.display = '';
}

function cerrar() {
    div = document.getElementById('flotante' + iPos); // Usamos el valor antes colocado
    div.style.display = 'none';
}

Esto tiene el inconveniente que se deberá cerrar primero la información anterior (ya sea lo hagas por código o asumas que el usuario la cerro) ya que iPos solo tiene un valor y es de la información inmediata mostrada; por tanto, deberás muy seguramente realizar cambios en tu código para lograr el efecto deseado, desde luego acorde a como manejes tus escenarios.

ACTUALIZACIÓN

Conforme a comentario que sigue mostrando la última hay dos cosas que considerar:

  • El id ya no debe ser en el tag <article>; debe ser en el <tr> en el 2do while.
  • El <tr> (del while antes mencionado) debe ir con el id; pero agregando el $i; es decir <tr id="flotante<?php echo $i; ?>" style="display:none;">.

Espero no me falte nada más.

GUÍA -Actualización-

La parte de JavaScript

var iPos = 0; // Variable global donde guardaremos el valor de $i (de PHP que se genera dentro de "Mostrar"

function mostrar(pIPos) {
    iPos=pIPos;
    div = document.getElementById('flotante' + iPos);
    div.style.display = '';
}

function cerrar() {
    div = document.getElementById('flotante' + iPos); // Usamos el valor antes colocado
    div.style.display = 'none';
}

Veo que quitaste un while no era necesario.

Era solo:

/* Esto así como esta -acorde a la lógica que "identifique"- */
<?php
    $i=0;
    while($row = $resultado->fetch_array(MYSQLI_ASSOC)) {
    extract($row); /* en lo personal este "extract" no le veo uses su resultado; desde luego en el código que compartes */
?>
    <p>
        <a href="javascript:mostrar(<?php echo $i; ?>);">
                <img style="width:200px; height:150px" 
                    src="images/<?php echo $row['imagen'];$img=$row['imagen']; ?>">
        </a>
    </p>
<?php $i++; } ?>

El $img que asignas y usas (en tu código) compartidos mas abajo; siempre tendrá el último valor del while (de arriba).

<?php
   require 'db.php';
   $usuario=$_SESSION["username"];
   $sql = "SELECT * FROM vehiculos where usuarios_username='$usuario' and imagen='$img' "; /* De este $img ver comentario arriba */ 
   $resultado = mysqli_query($con, $sql);
?>
<!-- TAGs de inicio hasta el tbody -->

<?php
   $i=0;    
   while($row = $resultado->fetch_array(MYSQLI_ASSOC)) {
      extract($row); /* Idem de while anterior */
      /* A continuación los tr y contenidos del tbody */
?>
   <tr id="flotante<?php echo $i; ?>" style="display:none;">
      <!-- Solo pongo el primero para que completes lo demás -->
      <td>
         <img src="images/<?php echo $row['imagen']; ?>" 
            class="img-rounded" width="50px" height="50px"/>
      </td>
   </tr>
<?php
      $i++;
   }
?>
<!-- No olvides cerrar los tag que abristes -->

GUÍA 2 -Actualización-

A continuación mi sugerencia en atención a tu comentario; (ojo es sugerencia conforme lo "veo" y mi lógica) desde luego espero te sirva.

Del primer bloque de PHP agregar variable $imgs de tipo array (arreglo); iniciarlizarla en vacía y dentro del while donde se invoca mostrar se llenara:

/* Esto así como esta -acorde a la lógica que "identifique"- */
<?php
    $imgs=array(); /* Declaramos el array */
    /* Para simplificar omito la ya conocido */
    while($row = $resultado->fetch_array(MYSQLI_ASSOC)) {
      /* Todo el código ya conocido */
      $imgs[]=$row['imagen']; /* Agregamos la imagen (1) */
      $i++; 
    } 
?>

(1) Esta parte "hoy" la tienes en src="images/<?php echo $row['imagen'];$img=$row['imagen']; ?>">

A continuación usaremos el $imgs que previamente poblamos.

<?php
   require 'db.php';
   $usuario=$_SESSION["username"];
?>
<!-- TAGs de inicio hasta el tbody -->
<?php
   /* Usare el for; el foreach no lo he usado */
   $totalImagenes= count($imgs); // Total de elementos Imagenes existentes
   $j=0;
   $i=0;
   for ($j=0; $j<$totalImagenes; $j++) {
      $img=$imgs[$j]; /* Aquí ya tendrás cada una de las imagenes del anterior while en misma variable $img */
      /* A continuación $sql como lo tienes por cada imagen; que esta antes del while */
      $sql = "SELECT * FROM vehiculos where usuarios_username='$usuario' and imagen='$img' "; /* aquí usas la variable $img como en tu código original */ 
      /* Aquí el while con el que formas cada tr y sus hijos */
   }

?>
<!-- No olvides cerrar los tag que abristes -->

Solo cuida de trasladar lo que ya tienes a los aquí sugerido y (en lo posible) explicado que va.

Answered by RobertoLeOr on February 2, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP