1

Me explico. Todo este código me funciona, pero solo con el primer post al traerme los comentarios desde la BD. La ventana modal se ejecuta bien en todos los posts, pero solo en el primer post me muestra los comentarios en ella. Nota: Con JQuery me funciona bien, solo que quiero trasladar todo a JS plano

function viewcomments() {
  Modal.alert("");


}



document.addEventListener("DOMContentLoaded", () => {
  document.querySelector(".comentarPosts").addEventListener("click", () => {
    let xhr = new XMLHttpRequest();
    xhr.open("POST", "comentarios.php"); // No utilices el tercer parámetro, está deprecado
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4) {
        if (xhr.status <= 299 && xhr.status >= 200) {
          document.getElementById("modal-message").innerHTML = xhr.responseText;
        } else {
          alert("Error al conectar con la API");
        }
      }
    };
    const comentarPost = document.querySelector(".comentarPosts");
    xhr.send(`idPost=${comentarPost.getAttribute("data-id")}`);
  });
});














//Este codigo es para crear la ventana modal usando JS plano(Vanilla JS)
/**
 * Modal.js
 * @author Joao Teixeira
 * @version 1.0
 * Copyright (c) Joao Teixeira
 * https://github.com/jpntex
 *
 */

var Modal = (function() {
  function Modal(type, options) {

    var defaults = {
      title: 'Notification', // modal title
      message: '', // modal message
      autoOpen: true, // show modal when declared
      closeOnEscape: true, // close when escape key pressed
      closeOnBlur: true, // close when overlay is clicked
      animated: true, // animate modal

      // button options
      buttonLbl: 'OK', // main button label
      buttonClass: '', // main button class
      cancelLbl: 'Cancel', // cancel button label

      // callbacks
      onConfirm: function() {}, // callback on confirm
      onCancel: function() {}, // callback on cancel
      onClose: function() {} // callback on close
    };

    this.type = type;
    this.options = extend(defaults, options);

    // animations not supported on IE9
    if (navigator.appVersion.indexOf("MSIE 9") !== -1) {
      this.options.animated = false;
    }

    this.init();
  }

  // modal templates
  var templates = {
    modal: '<div class="modal-box">' +
      '<div class="modal-title">[[title]]<div class="close-modal" data-action="close">&times;</div></div>' +
      '<div id="modal-message" class="styles">[[message]]</div>' +
      '<div class="modal-buttons">[[buttons]]</div>' +
      '</div>',
    btn: '<div class="modal-btn" data-action="close">[[label]]</div>',
    btnAlert: '<div class="modal-btn btn-alert" data-action="close">[[label]]</div>',
    btnConfirm: '<div class="modal-btn btn-confirm [[classes]]" data-action="confirm">[[label]]</div>'
  };

  // generates the modal html from the templates given the modal's type and options
  function buildModal(type, options) {
    var modal = document.createElement('div');
    modal.className = 'modal';

    if (options.closeOnBlur) modal.setAttribute('data-action', 'close');

    var modalTmplt = templates.modal;

    // set modal animations
    if (options.animated) {
      modal.className += ' fadeIn';
    }

    modalTmplt = modalTmplt.replace('[[title]]', options.title);
    modalTmplt = modalTmplt.replace('[[message]]', options.message);

    // add buttons based on modal type
    switch (type) {
      case 'confirm':
        var buttons = templates.btn.replace('[[label]]', options.cancelLbl);
        buttons += templates.btnConfirm.replace('[[label]]', options.buttonLbl).replace('[[classes]]', options.buttonClass);
        modalTmplt = modalTmplt.replace('[[buttons]]', buttons);
        break;
      case 'alert':
        var buttons = templates.btnAlert.replace('[[label]]', options.buttonLbl);
        modalTmplt = modalTmplt.replace('[[buttons]]', buttons);
        break;
    }

    modal.innerHTML = modalTmplt;
    return modal;
  }


  // handle modal events
  Modal.prototype.handleEvent = function(event) {
    var dataAction = event.target.getAttribute('data-action');

    // animation ended callback
    if (event.type === 'animationend') {
      return this.onAnimationEnd(event);
    }

    // check if 'Esc' key was pressed and close modal if set
    if (this.options.closeOnEscape) {
      if (event.keyCode === 27) {
        this.options.onCancel();
        return this.close();
      }
    }

    if (dataAction === 'close') {
      this.options.onCancel();
      return this.close();
    }

    if (dataAction === 'confirm') {
      this.options.onConfirm();
      return this.close();
    }
  };

  // animation end event handler
  Modal.prototype.onAnimationEnd = function(event) {
    this.modal.removeEventListener('animationend', this);
    document.body.removeChild(this.modal);
    this.options.onClose();
    return this;
  };

  // initialize modal creation
  Modal.prototype.init = function() {
    this.modal = buildModal(this.type, this.options);
    if (this.options.autoOpen) this.open();
  };

  // open modal
  Modal.prototype.open = function() {
    // reset to fadeIn animation on open
    if (this.options.animated) {
      this.modal.className = 'modal fadeIn';
    }

    // append modal to the body
    document.body.appendChild(this.modal);

    // attach events listeners
    this.modal.addEventListener('click', this);
    document.onkeyup = this.handleEvent.bind(this);

    return this;
  };

  // close modal
  Modal.prototype.close = function() {
    // clean events listeners
    this.modal.removeEventListener('click', this);
    document.onkeyup = null;

    if (this.options.animated) {
      this.modal.addEventListener('animationend', this);
      this.modal.className = 'modal fadeOut';
    } else {
      document.body.removeChild(this.modal);
      this.options.onClose();
    }

    return this;
  };

  // helper functions
  function extend(obj1, obj2) {
    for (var key in obj2)
      if (obj2.hasOwnProperty(key))
        obj1[key] = obj2[key];
    return obj1;
  }

  function isFunction(fn) {
    return typeof fn === 'function';
  }

  // modal interfaces
  return {
    confirm: function(options, onConfirm, onCancel, onClose) {
      options = (typeof options === 'string') ? {
        message: options
      } : options;

      if (isFunction(onClose)) options.onClose = onClose;
      if (isFunction(onCancel)) options.onCancel = onCancel;
      if (isFunction(onConfirm)) options.onConfirm = onConfirm;

      return new Modal('confirm', options);
    },
    alert: function(options, onClose) {
      options = (typeof options === 'string') ? {
        message: options
      } : options;

      if (isFunction(onClose)) options.onClose = onClose;

      return new Modal('alert', options);
    }
  };
})();
 <a href="javascript:void(0)" onclick="viewcomments();" class="comentarPosts"  data-id= <?php echo $posts_filas["Id_post"]; ?>    ><img src="img/message1.png"><span>25</span></a>

1 respuesta 1

1

El problema se debe a que estas usando document.querySelector()

Devuelve el primer elemento del documento (utilizando un recorrido primero en profundidad pre ordenado de los nodos del documento) que coincida con el grupo especificado de selectores.

Solución:

Podrias utilizar document.querySelectorAll()

Devuelve una NodeList estática (no viva) que representa una lista de elementos del documento que coinciden con el grupo de selectores indicados.

Ejemplo:

document.addEventListener("DOMContentLoaded", () => {
  // Buscamos TODOS e iteramos el arreglo
  document.querySelectorAll(".comentarPosts").forEach((element) => {
    // A cada elemento le asignamos el evento.
    element.addEventListener("click", (evt) => {
      // Obtenemos el elemento sobre el que se click-eo
      let comentarPost = evt.currentTarget;
      let xhr = new XMLHttpRequest();
      xhr.open("POST", "comentarios.php"); // No utilices el tercer parámetro, está deprecado
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status <= 299 && xhr.status >= 200) {
            document.getElementById("modal-message").innerHTML = xhr.responseText;
          } else {
            alert("Error al conectar con la API");
          }
        }
      };
      xhr.send(`idPost=${comentarPost.getAttribute("data-id")}`);
    });
  });
});

PD: Te recomiendo leer sobre delegación de eventos

1
  • @Wow. Muchas gracias.Tomaré en cuenta el consejo
    – luis
    el 6 ene. 2021 a las 3:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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