Tengo el siguiente icono en mi aplicación.
Este icono se imprime gracias a que tengo un método que lee un false en la tabla de mi base de datos. Cuando hago click en él, mi aplicación manda una orden al controlador y este actualiza el registro poniéndolo a true. Todo OK. El problema, es que quiero que una vez realizada esta operación, el icono cambie al siguiente:
Este icono aparece cuando el registro está a true, sin embargo, para que lo haga tengo que refrescar la página, cosa que no entiendo porque estoy utilizando AJAX. este es mi código.
// esta es la vista. El $nexo es el nombre del objeto de mi modelo:
<div class="btn-confirma-invitacion" data-id-reunion="<?php echo $nexo->getIdReunion_fk() ?>"
data-id-nexo="<?php echo $nexo->getId() ?>">
<?php $this->pintarAsistencia($nexo->getConfirmacion()) ?>
//este es el método que imprime un icono u otro según el valor que lea en la BBDD:
public function pintarAsistencia($valor_confirmacion){
if ($valor_confirmacion == 0){
echo "<i class='fas fa-question-circle'></i></div>";
} else{
echo "<i class='fas fa-check-circle'></i></div>";
}
}
//y aquí está mi javascript:
function confirmarInvitacion(e) {
if (e.target.parentElement.classList.contains('btn-confirma-invitacion')) {
const idNexo = e.target.parentElement.getAttribute('data-id-nexo');
console.log(idNexo);
const xhr = new XMLHttpRequest();
xhr.open('GET', `../controller/empleado_reunion_controlador.php?idNexo=${idNexo}&accion=confirmar`, true);
xhr.onload = function() {
if (this.status === 200) {
console.log(xhr.responseText);
Swal.fire({
position: 'center',
type: 'success',
title: 'Asistencia confirmada',
showConfirmButton: false,
timer: 1500
})
}
//este es icono que quiero cambiar.
e.target.replace("question", "check");
}
xhr.send();
}
}
Lo primero que he intentado es hacer una función para que cuando acabe, el navegador me redireccione a la misma página, pero se ve un salto muy feo. Después he intentado cambiar el icono con un replace, como se ve aquí, pero no funciona. ¿Alguien sabe como hacerlo?