在JSP頁面上使用Bootstrap模式

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模式進行確認是和否選項。你會看到每個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 
     }); 
});