JSPページでブートストラップ・モーダルを使用する

Question

私は、各行にInfo,EditおよびDeleteのボタンを持つusersテーブルを持っています。

<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> 

私が[削除]ボタンをクリックすると、その顧客はコンフォメーションなしで直ちに削除されます。私ははいといいえオプションで確認のためにブートストラップモードを使用したいと思います。各Deleteボタンが<form:form action="/deleteCustomer"...>タグで囲まれていることがわかります。この構造を維持しながら、コード内にAjax呼び出しを追加しないで、ブートストラップ確認モーダルを追加する方法はありますか？

Answer 1

あなたのアプローチを使用しないでください。本当に必要ないときに、ページに非常に多くのフォームを作成していることに注意してください。 AJAXを使用して要素を削除し、表をリロードすることをお勧めします。あなたのJSファイルで

<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> 

$('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 
     }); 
});