2

Tengo el siguiente icono en mi aplicación.

Icono circular naranja con un interrogante blanco dentro

Este icono se imprime gracias a que tengo un método en PHP 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:

icono circular verde con una marca de aprobación blanca dentro

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. Éste es mi código.

Ésta 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()) ?>

Éste 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?

2 respuestas 2

2

Te dejo dos formas de hacerlo.

  1. Removiendo la clase y agregando otra.
  2. Remplazando la palabra en específico.

/*setTimeout(() => {

  var element = document.getElementById("icono");
  
  // primera opcion
  element.classList.remove("fa-question-circle"); // eliminar clase
  element.classList.add("fa-check-circle"); // agregar clase  

}, 2000);*/

setTimeout(() => {

  // segunda opcion
  var element = document.getElementById("icono");
  element.className =  element.className.replace(/\bquestion\b/g, "check")

}, 2000)
<link rel="stylesheet" type="text/css"  href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

<i id="icono" class="fas fa-question-circle"></i>

3
  • 1
    Perfecto!! @Samir . La primera opción me va genial!!! Muchísimas gracias a todos por la ayuda!!! Commented el 15 jun. 2019 a las 19:56
  • ¿Hay alguna forma de que cuando cambie el icono, se elimine el id del icono cambiado? Es que esto lo imprimo con un bucle. Salen varios registros que tienen el mismo estado (por confirmar). Cuando hago el click, el id=icono pasa a estar tanto en los iconos check verdes como en los iconos question amarillos, de manera que si quiero confirmar otro registro, el icono no cambia porque se encuentra con dos elementos diferentes del DOM con el mismo ID. Commented el 15 jun. 2019 a las 23:02
  • sii puedes probar con element.removeAttribute("id") Commented el 16 jun. 2019 a las 0:29
0

El problema que estás encontrando y por lo que la solución que intentaste no funciona es porque estás intentando remplazar la cadena en un objeto: e.target es el elemento, el icono, y en él no se puede remplazar la cadena "question" por "check".

Lo que debes hacer es cambiar la clase de ese elemento para ello debes acceder a la propiedad className del e.target en tu código:

e.target.className = e.target.className.replace("question", "check");

Tienes que asignar porque replace no cambiar la cadena en sí, sino que devuelve una nueva cadena modificada. Alternativamente podrías usar algo más simple porque sabes la clase que quieres usar:

e.target.className = "fas fa-check-circle";

Aunque eso puede ser menos robusto porque si cambias los tipos de iconos te obligará a cambiar el código, mientras que la primera opción puede que no lo necesitase.

Aquí lo puedes ver funcionando en tu código (lo he añadido también al onerror para que se vea, porque yo no puedo acceder a esa URL, quita el onerror cuando copies el código):

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.className = e.target.className.replace("question", "check");
    }
    
    // cambio en el error para la demo
    xhr.onerror =function() {
      e.target.className = e.target.className.replace("question", "check");
    }

    xhr.send();
  }
}

document.querySelector(".btn-confirma-invitacion").onclick = confirmarInvitacion;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />

<div class="btn-confirma-invitacion" data-id-reunion="1234" data-id-nexo="5678">
  <i class='fas fa-question-circle'></i>
</div>

0

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.