0

Tengo un problema, tengo la intención de hacer una tabla y cada vez que se pulse sobre un nombre (esta puesto como enlace, que saque mediante ajax, abajo de la misma página una tabla con información de detalle), el problema es que cuando pulso sobre el enlace y hago la petición ajax, si pulso sobre otro no vuelve a ejecutarse el evento, sin embargo si comento la parte de request de ajax si me saca por consola la id que haya pulsado.

Con esto así solo me captura el click a un enlace y ya

<script>
      //Esto captura el evento de click de enlace y su id la cual sera enviada en la petición de request
      document.querySelectorAll(".enlace").forEach(el=>{ //Seleccionamos todos los elementos con la clase enlace
        el.addEventListener("click",e=>{ //Vemos cual se pulsa
          let id=e.target.getAttribute("id");  //Sacamos su id
          sendRequest(id);
        });
      });

      /**
       * Función encargada de hacer la petición asincrona
       */
      function sendRequest(id){
        console.log("Pulsado el id "+id);

        var theObject = new XMLHttpRequest();

        theObject.open('POST','../controller/detailController.php',true);
        theObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        theObject.onreadystatechange=function(id){
          document.body.innerHTML+=theObject.responseText;
        }
        theObject.send(`id=${id}`);
      }

  </script>

Comentando la parte de la request si me detecta varios clicks

 <script>
      //Esto captura el evento de click de enlace y su id la cual sera enviada en la petición de request
      document.querySelectorAll(".enlace").forEach(el=>{ //Seleccionamos todos los elementos con la clase enlace
        el.addEventListener("click",e=>{ //Vemos cual se pulsa
          let id=e.target.getAttribute("id");  //Sacamos su id
          sendRequest(id);
        });
      });

      /**
       * Función encargada de hacer la petición asincrona
       */
      function sendRequest(id){
        console.log("Pulsado el id "+id);

        // var theObject = new XMLHttpRequest();

        // theObject.open('POST','../controller/detailController.php',true);
        // theObject.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        // theObject.onreadystatechange=function(id){
        //   document.body.innerHTML+=theObject.responseText;
        // }
        // theObject.send(`id=${id}`);
      }

  </script>

Me detecta varios clicks

1 respuesta 1

0

El problema se debe a que estás reemplazando todo el contenido de la página con document.body.innerHTML += theObject.responseText en cada petición de AJAX. Por lo tanto, después de la primera petición, los elementos con la clase "enlace" ya no existen en el DOM, por lo que no se les pueden asignar más eventos.

Para solucionar este problema, en lugar de reemplazar todo el contenido de la página, deberías actualizar solo la parte de la página que necesita ser actualizada, por ejemplo, un contenedor específico.

Por ejemplo:

document.querySelectorAll(".enlace").forEach(el => {
  el.addEventListener("click", e => {
    let id = e.target.getAttribute("id");
    sendRequest(id);
  });
});

function sendRequest(id) {
  console.log("Pulsado el id " + id);

  var theObject = new XMLHttpRequest();

  theObject.open("POST", "../controller/detailController.php", true);
  theObject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  theObject.onreadystatechange = function() {
    if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
      document.querySelector("#contenedor").innerHTML = theObject.responseText;
    }
  };
  theObject.send(`id=${id}`);
}

En este ejemplo, se establece un contenedor con un ID de #contenedor y solo se actualiza el contenido de este contenedor en lugar de todo el contenido de la página.

Espero te sirva.

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.