Skip to main content
separar código para favorecer legibilidad. Formato de texto
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

sustituir Sustituir un icono por otro con javascriptal realizar una acción en la base de datos

introducir la descripción de la imagen aquíIcono circular naranja con un interrogante blanco dentro

Este icono se imprime gracias a que tengo un método en PHP que lee un falsefalse en la tabla de mi base de datos. Cuando

Cuando hago click en él, mi aplicación manda una orden al controlador y este actualiza el registro poniéndolo a truetrue. 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íicono circular verde con una marca de aprobación blanca dentro

Este icono aparece cuando el registro está a truetrue, sin embargo, para que lo haga tengo que refrescar la página, cosa que no entiendo porque estoy utilizando AJAX. esteÉste es mi código.

Ésta es la vista. El $nexo es el nombre del objeto de mi modelo:

    // 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:
    

É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:

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();
    }
}

sustituir un icono por otro con javascript

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();
    }
}

Sustituir un icono por otro al realizar una acción en la base de datos

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();
    }
}
Origen Enlace
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?