Skip to main content
1 de 2
InfiniteRoads
  • 750
  • 10
  • 26

sustituir un icono por otro con javascript

Tengo el siguiente icono en mi aplicación.

introducir la descripción de la imagen aquí

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:

introducir la descripción de la imagen aquí

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?

InfiniteRoads
  • 750
  • 10
  • 26