1

estoy intentando pasar datos de un enlace de una tabla dinámica a una modal de bootstrap para eliminar registro de un array y no me esta pasando el ID.

No me esta pasando el data-id del enlace al botón de la modal ID: btn-elimina como VALUE.

Enlace Dinámico:

<td class="product-remove">
  <a id="eliminar" data-id="<?php echo $id_evento;?>" data-toggle="modal" data-target="#eliminaModal"><i
      class="fa fa-times"></i>
  </a>
</td>

Javascript:

<script>
            
            let eliminaModal = document.getElementById('eliminaModal')
            eliminaModal.addEventListener('show.modal', function(event){
            
            let button = event.relatedTarget
            let id = button.getAttribute('data-id')
            let buttonElimina = eliminaModal.querySelector('.modal-footer #btn-elimina')
            buttonElimina.value = id
            console.log('querySelector')
            })

            function eliminar(){

                let botonElimina = document.getElementById('btn-elimina')
                let id = botonElimina.value 
                
                let url = 'clases/actualizar_carrito_tickets.php'
                let formData = new FormData()
                formData.append('id', id)
                formData.append('action', 'eliminar')

                fetch(url, {
                    method:'POST',
                    body: formData, 
                    mode: 'cors'
                }).then(response => response.json())
                .then(data => {
                    if(data.ok){
                        location.reload();
                    }
                })
            }
</script>

Modal:

<div class="modal fade" id="eliminaModal" tabindex="-1" aria-labelledby="eliminaModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="eliminaModalLabel">Confirmar Eliminación</h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
      ¿Deseas eliminar el Ticket?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
        <button id="btn-elimina" type="button" class="btn btn-danger" onclick="eliminar()">Eliminar</button>
      </div>
    </div>
  </div>
</div>

La modal abre correctamente pero el unico detalle es que no pasa el data-id.

Alguien podria hecharme una mano por favor.

1
  • ¿Que versión de Bootstrap estás usando? Podria ser la 4, y entonces podrias usar jquery para eso mediante: $('#eliminaModal').on('show.bs.modal', function (event) { en lugar de eliminaModal.addEventListener('show.modal', function(event){ a ver si así te funciona
    – masterguru
    Commented el 6 sept. 2022 a las 17:03

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.