1

Tengo un problema con el funcionamiento de mi web. Breve explicacion: genera una tabla donde muestra varios datos, extraídos de una BD, con un checkbox en cada fila. Los checkbox tienen la función de actualizar una columna en la BD, con el estado 1 o 0 (1 = checked). Ahora el error esta en que actualizo la tabla, (ya que ingresan nuevos datos en la BD todos los dias) con esta funcion:

$(document).ready(function() {
var pageRefresh = 6000; //6 s
setInterval(function() {
refresh();
}, pageRefresh);
});

function refresh() {
$('#contenido').load(location.href + " #contenido");
$('#Contador').load(location.href + " #Contador");
}

Actualiza esta tabla:

            <table id="contenido" class="table-principal">
            <thead>
                <tr id="Tab-Tit" style="color: white">
                    <th scope="col">ENTREGADO</th>
                    <th scope="col">APELLIDO</th>
                    <th scope="col">NOMBRE</th>
                    <th scope="col">TARJETA</th>
                    <th scope="col">SERVICIO</th>
                    <th scope="col">DESCRIPCION</th>
                    <th scope="col">FECHA/HORA</th>
                </tr>
            </thead>
            <tbody style="font-family: monospace;">
            <?php include('query.php') ?> 
            </tbody>
        </table>

Y aca estan los datos con los input:

        <tr>
            <td>
            <input type="hidden" class="id-datos" name="ID" value="<?php echo $row[6] ?>">
            <?php if ($row[7] == 1): ?>
            <input class="habilitar task-chk" name="habilitar" type="checkbox" checked >
            <?php endif;?>
            <?php if($row[7] == 0): ?>
            <?php if ($row[4] == "SE SOBREPASO EL MAXIMO DE ACCESOS"): ?>
            <input type="checkbox" class="habilitar task-chk" name="habilitar" disabled>
            <?php else: ?>
            <input type="checkbox" class="habilitar task-chk" name="habilitar">
            <?php endif; ?>
            <?php endif; ?>
            </td>
            <td><?=$row[0]?></td>
            <td><?=$row[1]?></td>
            <td><?=$row[2]?></td>
            <td><?=str_ireplace($serv_regular, $serv_nueva, $row[3])?></td>
            <td class="datos-td"><?=str_ireplace($desc_regular, $desc_nuevo, $row[4])?></td>
            <td><?=$row[5];?></td>
    </tr>

Al activarse la función a los 6s (la que actualiza), deja de funcionarme este script:

document.querySelectorAll(".habilitar").forEach((fila) => {
fila.addEventListener("change", (e) => {
  const id = document.querySelector('.id-datos').value
  const formdata = new FormData();
  if (e.target.checked) {
    let habilitar = 1;
    formdata.append("ID", id);
    formdata.append("habilitar", habilitar);
    console.log(habilitar);
    console.log(`El id es ${id}`);
    fetch("http://localhost:8080/Gestion_de_Comedores/Comedores_Totales/TEST/archivo.php", {
      method: 'POST',
      body: formdata,
      })
      .then((data) => {
        console.log("Enviado correctamente");
      })
      .catch((error) => {
        throw error;
      });
  } else {
    let habilitar = 0;
    formdata.append("ID", id);
    formdata.append("habilitar", habilitar);
    console.log(habilitar);
    console.log(`El id es ${id}`);
    fetch("http://localhost:8080/Gestion_de_Comedores/Comedores_Totales/TEST/archivo.php", {
      method: 'POST',
      body: formdata,
    })
      .then((data) => {
        console.log("Enviado correctamente");
      })
      .catch((error) => {
        throw error;
      });
  }
});
});

He visto que la mejor manera de resolver esto, es con WebSocket, pero lo desconozco y aun no me he metido en ese tema. Entonces mi duda es, como podría resolver este tema? He intentado cambiar la actualización con Ajax, pero aún no lo pude hacer funcionar, ya que no lo entiendo, soy nuevo con Ajax. Si pudiera solicitarles una ayuda, os agradeceré

EDIT:

Asi quedo el JS: Gracias por la ayuda.

const table = document.getElementById('contenido');
contenido.addEventListener("change", (event) => {
  const formdata = new FormData();
  const id = event.target.dataset.id
  if (event.target.checked) {
    let habilitar = 1;
    formdata.append("ID", id);
    formdata.append("habilitar", habilitar);
    console.log(habilitar);
    console.log(`El id es ${id}`);
    fetch("http://localhost:8080/Gestion_de_Comedores/Comedores_Totales/TEST/archivo.php", {
      method: 'POST',
      body: formdata,
      })
      .then((data) => {
        console.log("Enviado correctamente");
      })
      .catch((error) => {
        throw error;
      });
  } else {
    let habilitar = 0;
    formdata.append("ID", id);
    formdata.append("habilitar", habilitar);
    console.log(habilitar);
    console.log(`El id es ${id}`);
    fetch("http://localhost:8080/Gestion_de_Comedores/Comedores_Totales/TEST/archivo.php", {
      method: 'POST',
      body: formdata,
    })
      .then((data) => {
        console.log("Enviado correctamente");
      })
      .catch((error) => {
        throw error;
      });
  }
});

Y los Inputs:

                <td>
            <input type="hidden" class="id-datos" name="habilitar" value="<?php echo $row[6] ?>">
            <?php if ($row[7] == 1): ?>
            <input class="habilitar task-chk" data-id="<?=$row[6]?>" name="habilitar" type="checkbox" checked >
            <?php endif;?>
            <?php if($row[7] == 0): ?>
            <?php if ($row[4] == "SE SOBREPASO EL MAXIMO DE ACCESOS"): ?>
            <input type="checkbox" class="habilitar task-chk" name="habilitar" disabled>
            <?php else: ?>
            <input type="checkbox" class="habilitar task-chk" data-id="<?=$row[6]?>" name="habilitar">
            <?php endif; ?>
            <?php endif; ?>
            </td>

1 respuesta 1

1

El problema proviene que estás reemplazando todo el contenido de la tabla por los nuevos elementos pintados.

document.querySelectorAll(".habilitar").forEach((fila) => { // <- El problema aquí
fila.addEventListener("change", (e) => {
  const id = document.querySelector('.id-datos').value
   ...
});

Al iniciar el script obtienes todos los elementos con la clase habilitar, y le asignas un oyente, para cuando refrescas la tabla, esos elementos con dichos oyentes dejan de existir, y consigo sus eventos. Al insertar nuevos datos, son nuevos nodos, los cuales no tienen oyentes asignados. Tu estructura no tiene como escuchar eventos dinamicamente.

Podrías hacer algo tal que así:

const table = document.getElementById('contenido');

contenido.addEventListener('change', (event) => {
   const element = event.target;  // <-- este es tu checkbox
   ...
})

Lo que hace es escuchar el evento change; por como funcionan los eventos, estos se propagan de abajo hacia arriba; por lo que el evento llegará al elemento #contenido

Sin embargo desconozco si el nuevo contenido reemplaza tu contenedor #contenido, si ese es el caso, entonces el código de arriba no te servira de mucho. necesitas agregarle dicho oyente a un elemento que envuelva tus checkbox.

function refresh() {
$('#contenido').load(location.href + " #contenido");//<- este elemento se reemplaza?
$('#Contador').load(location.href + " #Contador");
}

Como ultimo punto; un temporizador que consulte cada minuto al servidor puede ocasionar problemas a largo plazo, te estarías haciendo un auto ddos. Yo lo hice en su momento y creeme, es una pésima idea. Puedes usar pusher para los sockets, es una librería muy poderosa

9
  • Si sé que hay mejores formas de hacerlo, es que soy nuevo en el tema de sockets, no lo sé implementar. Entonces mientras tanto, busco la manera con esta función. El #contenido se reemplaza así mismo, y hago un SELECT de los últimos 8 datos, y cuando hay nuevos datos, me trae los últimos, Pero no puedo hacerle funcionar que me haga el checked. Probe la manera que me decís, pero me hace el update, siempre en el último dato ingresado, y en la consola, se imprime, como si se hubiera hecho clic 8 veces en el mismo checkbox. el 2 ene. a las 17:20
  • Todos los inputs tienen el mismo nombre, esto solo aplica para inputs de tipo radio; eso te puede probocar problemas
    – KrlozCJ
    el 2 ene. a las 17:45
  • perdon, aclaro: porque tenia mal algo del JS, al hacer la manera que me indicas, me hace el checked en todos los que hay... el 2 ene. a las 17:46
  • 1
    En el evento change obtienes el elemento con event.target; al tener el checkbox puedes leer algún dato sobre éste en especifico. Por ejemplo, inyectandole el id que quieres actualizar <input type="checkbox" name="habilitar_<?=$row[6]?>" data-id="<?=$row[6]?>">, el dato lo obtienes así: const id = event.target.dataset.id, de éste modo identificas los checkbox.
    – KrlozCJ
    el 2 ene. a las 18:46
  • 1
    Vale, luego de muchas vueltas.. pude hacerlo funcionar, gracias a tu código y ayuda. Se que no es lo óptimo, pero es para un corto plazo, hasta que aprenda sobre websocket. Te muestro en un edit, como lo deje. Muchas gracias ;) el 2 ene. a las 19:54

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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