ajaxとspring MVCを使用してモーダルフォームを設定する方法

Question

私はjspを持っています。編集リンクをクリックして、春のMVCとHibernateを使ってその特定の顧客のデータをデータベースから取り出し、編集モーダルに表示して、ユーザーがデータを見て編集することを知ることができるようにします。

以下はコードスニペットです。

お客様の詳細の編集

は、お客様を編集するためのリンクです。ここからどこに行くのか分かりません.Ajax関数を呼び出すwheatherと、ajax関数はどのように見えますか？そして、アヤックスはモーダルをどのように呼びますか？

私はこの解決策（Spring MVC Populate Modal Form）を見ましたが、ajaxから値を取り込むためにどのようにモーダルが呼び出されるかを示していません。それとも他の方法がありますか？誰も助けてくれてありがとう、ありがとう。

<c:forEach var="customer" items="${customers}" varStatus="status"> 
             <tr> 
              <td><c:out value="${status.count}" /></td> 
              <td><a title="Go to the Company Certificate Detail">${customer.customerName}</a></td> 
              <td>${customer.contactName}</td> 

              <td>${customer.street}</td> 
              <td>${customer.state}</td> 
              <td>${customer.zipCode}</td> 
              <td>${customer.country}</td> 
              <td>${customer.email}</td> 

              <!--below line of code till end of tag </td> not showing on browser --> 

              <td> 
               <div class="btn-group"> 
                <button type="button" 
                 class="btn btn-default dropdown-toggle" 
                 data-toggle="dropdown"> 
                 Actions <span class="caret"></span> 
                </button> 
                <ul class="dropdown-menu" role="menu"> 
                 <li><a data-toggle="modal" 
         data-target="#editCustomerModal">Edit Customer Detail</a></li> 

                 <li><a data-toggle="modal" data-target="#deleteCustomerModal_${customer.id}" >Delete Customer</a></li> 
                </ul> 
               </div> 
              </td> 

             </tr> 

             <!--Delete Customer Modal --> 

    <div id="deleteCustomerModal_${customer.id}" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Confirm Delete</h4> 
      </div> 

      <div class="modal-body"> 
       <p>Are you sure you want to delete this Customer? </p> 
      </div> 
      <div class="modal-footer"> 

       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <a href="${pageContext.request.contextPath}/delete?id=${customer.id}" title="Delete"><i class="fa fa-trash-o"></i>Delete</a> 
      </div> 
     </div> 
    </div> 
</div> 
                      </c:forEach> 

私のモーダル編集する：

<!--Edit Customer Modal --> 

    <div id="editCustomerModal" class="modal fade" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        Create New Customer 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
       </div> 
       <div class="modal-body"> 



        <table class="form-table"> 
         <tbody> 
          <tr valign="top"> 
           <td style="width: 25% !important;"><label 
            class="not-required" for="pool-name">Customer Name:</label></td> 
           <td><input type="text" id="customerName" title="Company Name" path="#" 
            class="form-control" /></td> 
          </tr> 
          <tr valign="top"> 
           <td style="width: 25% !important;"><label 
            class="not-required" for="expire-after">Contact Name:</label></td> 
           <td><input type="text" id="contactName" path="#" 
            class="form-control" /></td> 
          </tr> 
          <tr valign="top"> 
           <td style="width: 25% !important;"><label 
            class="not-required" for="description">Street:</label></td> 
           <td><input type="text" id="street" path="#" 
            class="form-control" /></td> 
          </tr> 
          <tr valign="top"> 
           <td style="width: 25% !important;"><label 
            class="not-required" for="description">State:</label></td> 
           <td><input type="text" id="state" path="#" 
            class="form-control" /></td> 
          </tr> 
          <tr valign="top"> 
           <td style="width: 25% !important;"><label 
            class="not-required" for="expire-after">Zip-Code:</label></td> 
           <td><input type="text" id="zipCode" path="#" 
            class="form-control" /></td> 
          </tr> 
          <tr valign="top"> 
           <td style="width: 25% !important;"><label 
            class="not-required" for="expire-after">Country:</label></td> 
           <td><input type="text" id="country" path="#" 
            class="form-control" /></td> 
          </tr> 

          <tr valign="top"> 
           <td style="width: 25% !important;"><label 
            class="not-required" for="expire-after">Email:</label></td> 
           <td><input type="text" id="email" path="#" 
            class="form-control" /></td> 
          </tr> 

         </tbody> 
        </table> 


       </div> 
       <div class="modal-footer"> 
        <div> 
         <input type="submit" id="createNewCustomer" value="Save" 
          class="btn btn-default" onClick="alert('To be Implemented');" /> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        </div> 

       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

は、あなたの編集モデルにおける顧客IDの隠された値を入れ、これを試してみてください、

<input type="hidden" id="customerId" path="customerId" class="form-control" /> 

変更あなたがのために通常のボタンにボタンを提出します顧客を救う。

<div class="modal-footer"> 
    <div> 
     <button type="button" class="btn btn-default updateCustomer" data-dismiss="modal">Save</button> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
</div> 

あなたは特別にアヤックスに、JSと遊ぶことができる、

<script type="text/javascript"> 

    function ajaxCall(customerId) { 
     $.ajax({ 
      type: "POST", 
      url: "/clause/getUpdate?customerId="+customerId , 
      success: function(result) { 
       //populate customer list page again.. 
      } 
      } 
    }); 

    $('.updateCustomer').on('click', '.accountsEmployees', function() { 
     customerId=$("#customerId").val(); 
     ajaxCall(customerId); 

    } 
</script>