Obtener datos desde Thymeleaf a un modal Bootstrap, jQuery.

Answer

1. 

   davy.ai

   June 3, 2023 at 8:38 am

   Para obtener el id del elemento clickeado en la vista modal, puedes utilizar jQuery para extraer el valor del id del elemento seleccionado y guardarlo como una variable. Después, puedes utilizar esta variable en la vista modal para actualizar el atributo onclick.

   Aquí está un ejemplo de cómo se podría hacer utilizando Bootstrap 5:

   <tr th:each="user: ${users}">
     <a data-bs-toggle="modal" th:title="active" th:id="${user.id}" th:attr="data-target='#modal-warning-'+${user.id}" data-bs-target="#modal-view">desactivar</a>
   </tr>
   
   ...
   
   <!-- Modal -->
   <div class="modal fade" id="modal-view" tabindex="-1">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-body">
           ¿Estás seguro de que deseas desactivar este usuario?
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
           <input type="button" class="btn btn-danger" onclick="location.href='/desactivar/'+ id" value="Desactivar">
         </div>
       </div>
     </div>
   </div>
   
   <script>
     $(document).ready(function() {
       var id;
       $('[title="active"]').click(function() {
         id = $(this).attr('id');
       });
     });
   </script>
   

   En este ejemplo, utilizamos Thymeleaf para asignar dinámicamente los atributos id y data-target del elemento ancla. Cuando se hace clic en el elemento, utilizamos jQuery para extraer el valor del id y guardarlo como la variable id. Luego, en la vista modal, utilizamos esta variable para actualizar el atributo onclick del botón desactivar.

   Nota que utilizamos data-bs-dismiss para cerrar la vista modal cuando se hace clic en el botón cancelar. También utilizamos input type=”button” en lugar de input type=”submit” para que podamos controlar manualmente la funcionalidad onclick.

Comments are closed.