0

En la siguiente imagen tengo una lista de empleados cuya suma de sus costes da un coste total:

introducir la descripción de la imagen aquí

Necesito que cuando anule una invitación, además de que el empleado desaparezca de la lista, el coste total cambie dando como resultado la resta del empleado que hayamos quitado. Es decir, si eliminamos al último empleado, el coste total reunion que tendría que mostrar es de 71.08 (127.97 - 56.89). Quiero que lo haga de forma asíncrona.

Aquí muestro el código que he utilizado para eliminar al empleado de la tabla. He conseguido que al empleado lo elimine de forma asíncrona, sin embargo, el coste total no se actualiza si no refrescas la página. Así, ya tengo las funciones necesarias para calcular el coste de la reunión, pero únicamente necesito que ese importe se actualice a la par cuando anule la invitación.

    <tr class="fila-lista-asistentes">
      <td><?php echo $nexo->getIdEmpleadoModelo() ?></td> 
      <td><?php echo $nexo->getNombreModelo() ?></td> 
      <td><?php echo $nexo->getApellidosModelo() ?></td> 
      <td><?php echo $nexo->getConfirmacion() ?></td>
      <td><?php echo $nexo->getCosteHora() ?></td>

//en la siguiente línea recojo el id de cada registro o fila con el data-id-nexo.
      <td class="btn-anula-invitacion">" data-id-nexo="<?php echo $nexo->getId() ?>"><a href="#">Anular invitación</a></td>
      </tr> 
      <?php $gasto_total += $nexo->getCosteHora();
        endforeach;
        $nexo->setCosteEstimadoModelo($gasto_total);

//en la siguiente línea muestro el coste total de la reunión.
        echo "<tr><td>Coste Total reunión</td><td>".$nexo->getCosteEstimadoModelo()."</td></tr></table>";

Y aquí muestro mi código javascript:

const anula_invitacion = document.querySelector('.tabla-lista-asistentes');

anula_invitacion.addEventListener('click', anulaInvitacion);

function anulaInvitacion(e) {

    if (e.target.parentElement.classList.contains('btn-anula-invitacion')) {

        const idNexo = e.target.parentElement.getAttribute('data-id-nexo');


            const xhr = new XMLHttpRequest();

            xhr.open('GET', `../controller/empleado_reunion_controlador.php?idNexo=${idNexo}&accion=anular_invitacion`, true);

            xhr.onload = function () {
              if (this.status === 200) {
                console.log(xhr.responseText);
//Aquí realiza la acción de eliminar la fila correspondiente al invitado. Todo ok.
                e.target.parentElement.parentElement.remove(); 
//Entiendo que aquí debería de poner el código para cambiar el valor del coste total, pero no estoy seguro ni sé como hacerlo...
              }
            }
            xhr.send();
      }
    }

Y por último aquí mi controlador que recibe el parámetro enviado por el get y mediante un método que tengo en mi clase DAO, elimina el invitado de la base de datos:

    if ($_GET['accion'] == 'anular_invitacion')
{

    $idNexo = $_GET['idNexo'];

    $empleado_reunionDao = new Empleado_reunion_DAO();

    $empleado_reunionDao->borrarNexo($idNexo);

}

Alguien tiene idea de como hacerlo sin cambiar demasiado lo que ya tengo?

2 respuestas 2

0

Exactamente allí donde comentas que debe ir el codigo para actualizar el coste total, debes hacerlo así:

Si utilizas jQuery:

$(selector_del_coste_total).attr("value",nuevo_valor);

Sin jQuery:

document.querySelector(selector_del_coste_total).setAttribute("value", nuevo_valor);

En donde: selector_del_coste_total: Este debe ser por medio de una clase que contenga el elemento del coste total y o simplemente por su ID.

nuevo_valor: Este te recomiendo que lo calcules en el controlador desde donde eliminas al empleado y lo envíes para que lo recibas en tu código Javascript.

2
  • Gracias por la respuesta!!! Lo he probado pero no funciona. Dice que el setAttribute() no es una función. En cualquier caso, me ha ayudado mucho a orientarme para encontrar la solución, así que muchísimas gracias!! Pongo la solución!! Commented el 2 jun. 2019 a las 11:23
  • Que bueno que te haya ayudado al menos a orientarte y encontrar la solución, en realidad pense que estabas mostrando el coste total en un input no me fije que era en la tabla misma, gracias por compartir. Commented el 2 jun. 2019 a las 12:53
0

Primero la tabla:

 <tr class="fila-lista-asistentes">
          <td><?php echo $nexo->getIdEmpleadoModelo() ?></td> 
          <td><?php echo $nexo->getNombreModelo() ?></td> 
          <td><?php echo $nexo->getApellidosModelo() ?></td> 
          <td><?php echo $nexo->getConfirmacion() ?></td>
          <td id="costeHora"><?php echo $nexo->getCosteHora() ?></td>

    //Paso como atributo el coste de cada empleado
          <td class="btn-anula-invitacion" data-id-costeEmpleado="<?php echo $nexo->getCosteHora() ?>"><a href="#">Anular invitación</a></td>
          </tr> 
          <?php $gasto_total += $nexo->getCosteHora();
            endforeach;
            $nexo->setCosteEstimadoModelo($gasto_total);
    //Paso el coste total con el id.
            echo "<tr><td>Coste Total reunión</td><td id='costeEstimado'>".$nexo->getCosteEstimadoModelo()."</td></tr></table>";

Ahora mi archivo js:

    const anula_invitacion = document.querySelector('.tabla-lista-asistentes');

    anula_invitacion.addEventListener('click', anulaInvitacion);

    function anulaInvitacion(e) {

        if (e.target.parentElement.classList.contains('btn-anula-invitacion')) {

        const costeEmpleado = e.target.parentElement.getAttribute('data-id-costeEmpleado');
        let costeEstimadoObj = document.querySelector('#costeEstimado');
        const costeEstimado = costeEstimadoObj.innerHTML;
        var costeActualizado = costeEstimado - costeEmpleado;


        const xhr = new XMLHttpRequest();
        //en la url paso a mi controlador valores que necesito para operar 
        con la BBDD,pero aquí no tiene relevancia, por lo que no lo tengais 
        en cuenta.
        xhr.open('GET', `../controller/empleado_reunion_controlador.php?idNexo=${idNexo}&idReunion=${idReunion}&costeEmpleado=${costeEmpleado}&accion=anular_invitacion`, true);

        xhr.onload = function () {
        if (this.status === 200) {
        console.log(xhr.responseText);
    //Aquí realiza la acción de eliminar la fila correspondiente al invitado. Todo ok.
        e.target.parentElement.parentElement.remove(); 
    //Esto modifica el coste total.
        costeEstimadoObj.innerHTML = costeActualizado;
                  }
                }
        xhr.send();
          }
        }

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.