PHP - Marcar/Desmarcar filas de una tabla como favoritos actualizando la base de datos

Pos: 1.227

Val: 3

Marcar/Desmarcar filas de una tabla como favoritos actualizando la base de datos

Publicado por Goyo (3 intervenciones) el 09/04/2021 14:45:03

Marcar/Desmarcar filas de una tabla como favoritos

Hola a todos. Os cuento.
Tengo una tabla con un listado de alumnos generada dinámicamente desde una consulta php/mysql.
Por el perfil de algunos de ellos necesito marcarlos/desmarcarlos a modo de 'perfil favorito o interesante', en este caso, mediante el típico corazón (para que sea gráficamente más visual).
En esta generación dinámica de la tabla añado un formulario a la última columna (os muestro el código abajo), que me permitiría mediante una llamada a js/ajax acceder a la base de datos para marcar/desmarcar al alumno y finalmente sustituir el corazón relleno por el no relleno, o viceversa, para que la experiencia del usuario sea agradable a la vista.
Esto funciona estupendamente, pero únicamente con la primera fila de la tabla. A partir de ahí el comportamiento es errático, y no consigo encontrarle lógica.
Tengo hecho algo parecido para borrar registros mediante checks en otra parte de la aplicación. En este caso, marco todos los checks juntos y luego pulsando un botón 'Borrar' elimino todas las filas de la tabla marcadas previamente; para ello tuve que añadir unos [] a cada check.
En este caso necesito tratar cada fila de manera individual y ejecutar cada acción en cada pulsación, actualizando la base de datos y el icono correspondiente cada vez.
Os dejo el código de la última columna de cada fila, que muestra el botón que habría que pulsar.

Muchas gracias por adelantado por vuestra ayuda.

<?php

switch ($fila['coin_favoritaParaCurso']){

    case 'SI':?>

        <td class="centrado">  desmarcar

            <form id="frmMarcarFavoritaParaCurso">

               <input type="hidden" name="marcarComoFavoritaParaCurso" value="NO" />

               <input type="hidden" name="fichaAlumno" value="<?php echo $fila['coin_alumnoDNI'];?>" />

               <input type="hidden" name="fichaCurso" value="<?php echo $fila['fichaCurso_ID'];?>" />

               <?php echo "<button type='submit' class='btnFavoritoParaCurso' title='Desmarcar como interesante la Ficha del Alumno ".$fila['alumno_nombre']." ".$fila['alumno_apes']." (".$fila['coin_alumnoDNI'].")'></button>";?>

            </form>

        </td>

      <?php

      break;

    default: ?>

        <td class="centrado">  marcar

            <form id="frmMarcarFavoritaParaCurso">

               <input type="text" name="marcarComoFavoritaParaCurso" value="SI" />

               <input type="text" name="fichaAlumno" value="<?php echo $fila['coin_alumnoDNI'];?>" />

               <input type="text" name="fichaCurso" value="<?php echo $fila['fichaCurso_ID'];?>" />

               <?php echo "<button type='submit' class='btnFavoritoParaCursoNo' title='Marcar como interesante la Ficha del Alumno ".$fila['alumno_nombre']." ".$fila['alumno_apes']." (".$fila['coin_alumnoDNI'].")'></button>";?>

            </form>

        </td>

      <?php

        break;

?>

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 3

Val: 2.761

Marcar/Desmarcar filas de una tabla como favoritos actualizando la base de datos

Publicado por Mauro (1047 intervenciones) el 10/04/2021 23:28:35

Hola Goyo!

¿Podrías mostrar el ciclo completo que te crea al tabla? Por otro lado, no veo los atributos action ni method en la definición de los formularios... eso podría ayudar también a comprender el contexto de tu problema.

Algo más que noto es que el código de ambos casos es prácticamente igual (Si no me equivoco sólo cambia el value de marcarComoFavoritaParaCurso... ¿no te sería mejor usar un código más compacto? Algo como:

<td class="centrado">  marcar

  <form id="frmMarcarFavoritaParaCurso">

    <input type="text" name="marcarComoFavoritaParaCurso" value="<?php echo ($fila['coin_favoritaParaCurso'] == 'SI' ? 'SI' : 'NO'); ?>" />

    <input type="text" name="fichaAlumno" value="<?php echo $fila['coin_alumnoDNI'];?>" />

    <input type="text" name="fichaCurso" value="<?php echo $fila['fichaCurso_ID'];?>" />

    <button type="submit" class="btnFavoritoParaCurso<?php echo ($fila['coin_favoritaParaCurso'] == 'SI' ? '' ? 'No'); ?>" title="<?php echo ($fila['coin_favoritaParaCurso'] == 'SI' ? 'Desmarcar' ? 'Marcar'); ?> como interesante la Ficha del Alumno <?php echo $fila['alumno_nombre']." ".$fila['alumno_apes']." (".$fila['coin_alumnoDNI'].")"; ?>"></button>

  </form>

</td>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 1.227

Val: 3

Marcar/Desmarcar filas de una tabla como favoritos actualizando la base de datos

Publicado por Goyo (3 intervenciones) el 11/04/2021 11:47:34

Hola Mauro. Gracias por tu contestación. Te comento.
Empezando por lo último: me parece una muy buena idea la que planteas para simplificar el código. La aplicaré a partir de ahora.
Respecto a la primera parte.
El motivo de mostraros sólo la última columna de cada fila de la tabla es que es supercompleja (no por dificil sino por que tiene mucha información). La columna problemática es la última que muestro:
acciones

La lógica es la siguiente.
Referencio el archivo 'MarcarFavoritoParaCurso_PorAjax.js' que contiene la función que trata el submit del botón del formulario "frmMarcarFavoritaParaCurso". A continuación recorro el array con los datos extraidos previamente como muestro a continuación:

<script type="text/javascript" src="MarcarFavoritoParaCurso_PorAjax.js"></script>

<tbody>

<?php foreach ($tsArrayFichasCursos as $fila): ?>

<tr>

    <td class="centrado">

       otros datos del alumno/curso

    <td>

...

<?php

switch ($fila['coin_favoritaParaCurso']){

    case 'SI':?>

        <td class="centrado">  desmarcar

            <form id="frmMarcarFavoritaParaCurso">

               <input type="hidden" name="marcarComoFavoritaParaCurso" value="NO" />

               <input type="hidden" name="fichaAlumno" value="<?php echo $fila['coin_alumnoDNI'];?>" />

               <input type="hidden" name="fichaCurso" value="<?php echo $fila['fichaCurso_ID'];?>" />

               <?php echo "<button type='submit' class='btnFavoritoParaCurso' title='Desmarcar como interesante la Ficha del Alumno ".$fila['alumno_nombre']." ".$fila['alumno_apes']." (".$fila['coin_alumnoDNI'].")'></button>";?>

            </form>

        </td>

      <?php

      break;

    default: ?>

        <td class="centrado">  marcar

            <form id="frmMarcarFavoritaParaCurso">

               <input type="text" name="marcarComoFavoritaParaCurso" value="SI" />

               <input type="text" name="fichaAlumno" value="<?php echo $fila['coin_alumnoDNI'];?>" />

               <input type="text" name="fichaCurso" value="<?php echo $fila['fichaCurso_ID'];?>" />

               <?php echo "<button type='submit' class='btnFavoritoParaCursoNo' title='Marcar como interesante la Ficha del Alumno ".$fila['alumno_nombre']." ".$fila['alumno_apes']." (".$fila['coin_alumnoDNI'].")'></button>";?>

            </form>

        </td>

      <?php

        break;

?>

...

</tr>

<?php endforeach;?>

</tbody>

Tras mostra lo anterior, tendría la tabla a la vista del usuario, esperando que pulse el "corazoncito" correspondiente. En realidad es una 'estrella' como la que se muestra en la imagen adjunta.
El formulario no tiene method ni action porque el código que ejecuta la acción del formulario 'frmMarcarFavoritaParaCurso' se realiza a través del evento submit en una función javascript con llamada ajax. Lo muestro.
Contenido de MarcarFavoritoParaCurso_PorAjax.js es:

$(document).ready(function() {

    $("#frmMarcarFavoritaParaCurso").submit(function(e) {

        e.preventDefault();

        var myData = $("#frmMarcarFavoritaParaCurso").serialize();

        jQuery.ajax({

            type: "POST",

            url: "index.php?opcion=doMarcarFichaAlumnoComoFavoritaParaCurso_PorAjax",

            dataType:"text",

            data:myData, //Form variables

            success:function(response){

              /*Trato los datos devueltos*/

                return false;

},

            error:function (xhr, ajaxOptions, thrownError){

                $("#capaBtnVolver").show(); //show submit button

                $("#LoadingImage").hide(); //hide loading image

                alert(thrownError);

});

});

});

Si pulso la "estrella" de la primera fila todo funciona correctamente, es decir, me actualiza la bd. Pero si pulso el segundo, tercero.... hace cosas raras.
En este par de días he intentado cambiar la lógica, cambiando el formulario por imágenes. Ahora recojo el evento clic de estas imágenes ('estrella'), simulando un botón. 'He descubierto', en este segundo caso, que si pulso la 'estrella' de la primera fila me hace correctamente la lógica, pero si pulso la segunda, tercera... la función js me sigue recogiendo los datos de la primera fila.

En resumen, mi idea es marcar para cada fila, si es alumno favorito o no y actualizar el icono 'estrella'. La idea es la misma que cuando se hace una selección de productos y vamos añadiendo en la cesta sólo los productos que nos interesa.
No se si voy errado, pero me da la sensación que la función js siempre recoje los datos de la primera fila, y no sé como distinguir qué fila pulsada es la que llega al js, y si la mejor opción es utilizar un formulario o imágenes.

Valora esta respuesta

Comentar

Pos: 3

Val: 2.761

Marcar/Desmarcar filas de una tabla como favoritos actualizando la base de datos

Publicado por Mauro (1047 intervenciones) el 12/04/2021 15:52:38

Hola Goyo:

Justamente yo te iba a sugerir que no uses el submit si no el click sobre cada imagen.

Me imago que lo que te falta es identificar el id de la imagen correspondiente a la fila donde se hizo el click.

Para esto puedes tener un atributo en <tr> tipo data-id que se llene desde el PHP al momento de generar la tabla o bien en el click sobre la imagen puedes hacer que el javascript envíe el id, algo como:

<td><button onclick="cambiarFavorito(<?php echo $fila['fichaCurso_ID'];?>)"/></td>

Y del lado de javascript simplemente tomas ese parámetro y lo pasas al ajax.

Saludos!

Valora esta respuesta

Comentar

Marcar/Desmarcar filas de una tabla como favoritos actualizando la base de datos

Publicado por Goyo (3 intervenciones) el 12/04/2021 17:51:32

Hola Mauro,
Al final he conseguido hacerlo de la segunda manera, es decir, utilizando imágenes en lugar de formularios e identificando en el js cuál fue la imagen pulsada, "aprovechando", efectivamente, el id de la ficha. Como botón he utilizado una imagen.
Mi solución es un poco más enrevesada y veo más elegante la que tú propones, utilizando un botón, así que para la siguiente utilizaré la tuya.
Muchas gracias.

Valora esta respuesta

Comentar

Problema con ciclo FOR para insertar en MYSQL

Página de formulario de contacto con PHP Mailer no se ejecuta