Использование Bootstrap modal на странице JSP

Question

У меня есть таблица пользователей с Info, Edit и Delete кнопок для каждой строки.

<tbody> 
    <c:choose> 
     <c:when test="${not empty customers}"> 
     <c:forEach items="${customers}" var="customer"> 
      <tr> 
       <td><c:out value="${customer.id}" /></td> 
       <td><c:out value="${customer.name}"/></td> 
       <td><c:out value="${customer.phoneNumber}"/></td> 
       <td><c:out value="${customer.email}"/></td> 
       <td style="text-align: center"> 
        <form:form action="/customerDetails"><input type="hidden" name="email" value="${customer.email}"/> 
         <button class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-list-alt"></span></button> 
        </form:form> 
       </td> 
       <td style="text-align: center"> 
        <form:form action="/findCustomer"><input type="hidden" name="email" value="${customer.email}"/> 
         <button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-pencil"></span></button> 
        </form:form> 
       </td> 
       <td style="text-align: center"> 
        <form:form action="/deleteCustomer"><input type="hidden" name="email" value="${customer.email}"/> 
         <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></button> 
        </form:form> 
       </td> 
      </tr> 
     </c:forEach> 
     </c:when> 
     <c:otherwise> 
      <h2>There is no registered customers</h2> 
     </c:otherwise> 
    </c:choose> 
</tbody> 

Когда я нажимаю кнопку «Удалить», этот клиент немедленно удаляется без какой-либо конформации. Я хочу использовать Bootstrap modal для подтверждения с Да и Нет вариантов. Вы видите, что каждая кнопка Delete окружена тегом <form:form action="/deleteCustomer"...>. Есть ли способ добавить подтверждение загрузки Bootstrap при сохранении этой структуры и не добавление какого-либо вызова Ajax в мой код?

Answer 1

Не используйте свой подход, обратите внимание, что вы создаете так много форм на странице, когда это действительно не нужно. Я предлагаю вам использовать AJAX для удаления элементов и перезагрузки таблицы. Основные изменения были бы что-то вроде этого:

<tbody> 
    <c:choose> 
     <c:when test="${not empty customers}"> 
     <c:forEach items="${customers}" var="customer"> 
      <tr> 
       <td><c:out value="${customer.id}" /></td> 
       <td><c:out value="${customer.name}"/></td> 
       <td><c:out value="${customer.phoneNumber}"/></td> 
       <td><c:out value="${customer.email}"/></td> 
       <td style="text-align: center"> 
         <button class="btn btn-warning btn-xs"><span class="glyphicon glyphicon-list-alt"></span></button> 
       </td> 
       <td style="text-align: center"> 
         <button class="btn btn-primary btn-xs" data-customer-id="${customer.id}"><span class="glyphicon glyphicon-pencil"></span></button> 
       </td> 
       <td style="text-align: center"> 
         <button class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></button> 
       </td> 
      </tr> 
     </c:forEach> 
     </c:when> 
     <c:otherwise> 
      <h2>There is no registered customers</h2> 
     </c:otherwise> 
    </c:choose> 
</tbody> 

В файле JS

$('table .btn-warning').click(showInfo); 
$('table .btn-danger').click(removeRecord); 
... 

function removeRecord(){ 
    var customerId = $(this).data('customer-id'); 
    bootbox.confirm({ 
       message: "Sure to delete?", 
       callback: function(result) { 
        if (result) { 
         $.ajax({ 
          method: "POST", 
          url: getCtx() + "/yourRemoveURL", 
          success: function (jsonResponse) { 
           //your on success actions, maybe reload the table or remove the row 

          } 
         }); 
        } 
       } 
      }); 
} 

Answer 2

Добавить атрибут ID в вашем кнопку Удалить.

<td style="text-align: center"> 
        <form:form action="/deleteCustomer"><input type="hidden" name="email" value="${customer.email}"/> 
         <button id="deleteBtn" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-trash"></span></button> 
        </form:form> 
       </td> 

Добавить JavaScript на странице:

$('#deleteBtn').on('click', function(e){ 
    e.preventDefault(); 
    var $form=$(this).closest('form');  
    $('#confirm').modal({ backdrop: 'static', keyboard: false }) 
     .one('click', '#delete', function() { 
      $form.trigger('submit'); // submit the form 
     }); 
});