I explain. All this code works for me, but only with the first post to bring me the comments from the DB. The modal window runs fine on all posts, but only on the first post it shows me the comments in it. Note: JQuery works fine for me, I just want to translate everything to plain JS
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">×</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>
The problem is because you are using
document.querySelector()
Solution:
could you use
document.querySelectorAll()
Example:
PS: I recommend you read about event delegation