1

Estoy realizando un mini proyecto de práctica web y en JavaScript lo que hago es hacer una petinción a PHP donde hago una consulta de base de datos que me dé todas las categorías y me las almacene en un arreglo. De ahí lo envío en JSON a JavaScript.

En JavaScript lo que hago es crear etiquetas <li> para mostrarlos.

Mi problema es que cada vez que llamo a esa petición cuando almaceno más categorías o hago clic en un botón donde muestra un modal se repiten constantemente.

No sé si hay una solución para que se limpie o se remueva todo dentro de la etiqueta <ul> antes de llamar a la petición o algo parecido.

Mi HTML:

 <form id="formAgregarCategoria" name="formAgregarCategoria" method="post">
    <div class="alert alert-danger text-center" id="mensaje5" role="alert" style="display: none;"></div>
    <div class="row row-cols-2 g-0">
        <div class="col-5 col-lg-5">
            <p>Lista de categorías</p>

            <ul id="listaCategoria">
                
            </ul>

        </div>
        <div class="col-7 col-lg-7">
            <label for="inputCategoria" class="form-label">Categoría</label>
            <input type="text" required class="form-control" name="txtCategoria" id="inputCategoria" placeholder="Categoría(protector solar, bebida)">
        </div>
    </div>
    <div class="modal-footer mt-4">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="sumit" id="addCategoria" class="btn btn-primary">Guardar</button>
    </div>
</form>

Mi JavaScript donde hago la petición:

document.getElementById('btncat').addEventListener("click", function() {
verCategorias(); })

function verCategorias() {
var ul = document.getElementById("listaCategoria");
const http = new XMLHttpRequest();
const url = '../../controlador/consultas/verCategorias.php';

http.open('POST', url); 
http.send();

http.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
        var respuesta = JSON.parse(http.responseText);
        
        for(var i = 0; i < respuesta.length; i++) {
            var li = document.createElement("li");
            li.innerHTML = respuesta[i].NomCategoria;
            ul.appendChild(li);
        }
    }
}

Y mi PHP donde hago la consulta a mi base de datos:

<?php
include_once("../../controlador/consultas/conexion.php");
$respuesta = array();

$querySelect = "SELECT NomCategoria FROM categoria";

if($result = $cn->query($querySelect)) {

    for($i = 0; $i<$result->num_rows;$i++) {
        $respuesta[$i] = $result->fetch_assoc();
    }

} else {
    $respuesta['estado'] = "2";
}


header('Content-Type: application/json');
echo json_encode($respuesta);

Aquí muestro cada vez que hago clic para abrir el modal se repiten mis datos sin afectar mi base de datos. Cuando recargo la página aparece sin repetir:

Captura de pantalla del ejemplo

1 respuesta 1

1

Cada vez que pulsas el botón se descargan los datos y se agregan al HTML de la ventana modal. Si pulsas más de una vez el botón estarás cargando más de una vez los datos, por lo que cada vez tendrás más elementos.

Deberías hacer algo para evitar que se descarguen y agreguen más de una vez los datos cada vez que pulses el botón para mostrar la ventana modal.

Un método para conseguirlo podría ser el que muestro a continuación:

btncat.addEventListener("click", function(evento) {
  /* Si el atributo "data-cargado" vale "si" evitamos la descarga */
  if (evento.target.dataset.cargado != "si") {
    console.log("Cargando categorías");
    verCategorias();
    /* Asignamos "si" al atributo "data-cargado" */
    evento.target.dataset.cargado = "si";
  } else {
    console.log("Categorías ya cargadas");
  }
});
/* Simulamos la función */
const verCategorias = () => {};
<button id="btncat">Pulsar</button>

En el propio botón creo un atributo llamado data-cargado que valdrá "si" tras la primera descarga, evitando que se vuelva a descargar la información múltiples veces. Además, como el atributo se crea en el botón pulsado, puedes usar el mismo código en múltiples botones sin problemas.

También podrías borrar el contenido del ul antes de volver a poblarlo de información usando Element.replaceChildren() como muestro a continuación:

btncat.addEventListener("click", function(evento) {
  /* Borro todos los elementos anteriores */
  listaCategoria.replaceChildren();
  /* Agrego uno de ejemplo */
  let li = document.createElement("li");
  li.innerText = "¡Hola! <=> :D";
  listaCategoria.appendChild(li);
});
<ul id="listaCategoria">
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>
<button id="btncat">Pulsar</button>

5
  • 1
    muchas gracias, si me funciono
    – lads
    Commented el 23 feb. 2023 a las 22:50
  • Me alegra haber sido de ayuda. PD: Recuerda que no es necesario hacer uso de getElementById para buscar un elemento por su id en el documento. El navegador se encarga de crear una propiedad en el ámbito por defecto (window) por cada elemento que tenga asignado un id. Commented el 23 feb. 2023 a las 22:53
  • no lo sabia, muchas gracias por el tip
    – lads
    Commented el 23 feb. 2023 a las 23:03
  • Acabo de agregar otra alternativa, útil cuando agregas o eliminas elementos y quieres que se refresque la información que se muestra. En ese caso en vez de no volver a descargar la información, ésta se descarga y reemplaza a la que hubiera previamente. Commented el 23 feb. 2023 a las 23:04
  • muchas gracias, tambien me funciona
    – lads
    Commented el 23 feb. 2023 a las 23:08

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.