title: How to populate a modal form with ajax and spring MVC
body: <p>I have a jsp where i see the result saved at Data Base in a table on the browser with options to edit, delete each row. I want to be able to click the edit link, fetch the data for that particular customer from data base with spring MVC and Hibernate and show it on the edit modal so that user can see the data and know which to edit. </p>
  
  <p>Below is code Snippet, the line <li>Edit Customer Detail</li> is the link to edit the customer. Am not sure from here where to go, wheather to call an ajax function and how would the ajax function look like? and how will the ajax call the modal?</p>
  
  <p>I saw this solution(<a href="https://stackoverflow.com/questions/25009482/spring-mvc-populate-modal-form">Spring MVC Populate Modal Form</a>) but it doesnt show how the modal will be called to populate the values from ajax. Or is there any other way? Could anyone please help, thanks.</p>
  
  <pre><code> &lt;c:forEach var="customer" items="${customers}" varStatus="status"&gt;
                                          &lt;tr&gt;
                                              &lt;td&gt;&lt;c:out value="${status.count}" /&gt;&lt;/td&gt;
                                              &lt;td&gt;&lt;a title="Go to the Company Certificate Detail"&gt;${customer.customerName}&lt;/a&gt;&lt;/td&gt;
                                              &lt;td&gt;${customer.contactName}&lt;/td&gt;
  
                                              &lt;td&gt;${customer.street}&lt;/td&gt;
                                              &lt;td&gt;${customer.state}&lt;/td&gt;
                                              &lt;td&gt;${customer.zipCode}&lt;/td&gt;
                                              &lt;td&gt;${customer.country}&lt;/td&gt;
                                              &lt;td&gt;${customer.email}&lt;/td&gt;
  
                                              &lt;!--below line of code till end of tag &lt;/td&gt; not showing on browser  --&gt;
  
                                              &lt;td&gt;
                                                  &lt;div class="btn-group"&gt;
                                                      &lt;button type="button"
                                                          class="btn btn-default dropdown-toggle"
                                                          data-toggle="dropdown"&gt;
                                                          Actions &lt;span class="caret"&gt;&lt;/span&gt;
                                                      &lt;/button&gt;
                                                      &lt;ul class="dropdown-menu" role="menu"&gt;
                                                          &lt;li&gt;&lt;a data-toggle="modal"
                          data-target="#editCustomerModal"&gt;Edit Customer Detail&lt;/a&gt;&lt;/li&gt;
  
                                                          &lt;li&gt;&lt;a data-toggle="modal" data-target="#deleteCustomerModal_${customer.id}" &gt;Delete Customer&lt;/a&gt;&lt;/li&gt;
                                                      &lt;/ul&gt;
                                                  &lt;/div&gt;
                                              &lt;/td&gt;
  
                                          &lt;/tr&gt;
  
                                          &lt;!--Delete Customer Modal  --&gt;
  
      &lt;div id="deleteCustomerModal_${customer.id}" class="modal fade"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Confirm Delete&lt;/h4&gt;
              &lt;/div&gt;
  
              &lt;div class="modal-body"&gt;
                  &lt;p&gt;Are you sure you want to delete this Customer? &lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
  
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;a href="${pageContext.request.contextPath}/delete?id=${customer.id}" title="Delete"&gt;&lt;i class="fa fa-trash-o"&gt;&lt;/i&gt;Delete&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
                                                                              &lt;/c:forEach&gt;
  </code></pre>
  
  <p>My Modal to edit:</p>
  
  <pre><code>&lt;!--Edit Customer Modal  --&gt; 
  
      &lt;div id="editCustomerModal" class="modal fade" role="dialog"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      Create New Customer
                      &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
  
  
  
                      &lt;table class="form-table"&gt;
                          &lt;tbody&gt;
                              &lt;tr valign="top"&gt;
                                  &lt;td style="width: 25% !important;"&gt;&lt;label
                                      class="not-required" for="pool-name"&gt;Customer Name:&lt;/label&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="text" id="customerName" title="Company Name" path="#"
                                      class="form-control" /&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr valign="top"&gt;
                                  &lt;td style="width: 25% !important;"&gt;&lt;label
                                      class="not-required" for="expire-after"&gt;Contact Name:&lt;/label&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="text" id="contactName" path="#"
                                      class="form-control" /&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr valign="top"&gt;
                                  &lt;td style="width: 25% !important;"&gt;&lt;label
                                      class="not-required" for="description"&gt;Street:&lt;/label&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="text" id="street" path="#"
                                      class="form-control" /&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr valign="top"&gt;
                                  &lt;td style="width: 25% !important;"&gt;&lt;label
                                      class="not-required" for="description"&gt;State:&lt;/label&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="text" id="state" path="#"
                                      class="form-control" /&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr valign="top"&gt;
                                  &lt;td style="width: 25% !important;"&gt;&lt;label
                                      class="not-required" for="expire-after"&gt;Zip-Code:&lt;/label&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="text" id="zipCode" path="#"
                                      class="form-control" /&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr valign="top"&gt;
                                  &lt;td style="width: 25% !important;"&gt;&lt;label
                                      class="not-required" for="expire-after"&gt;Country:&lt;/label&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="text" id="country" path="#"
                                      class="form-control" /&gt;&lt;/td&gt;
                              &lt;/tr&gt;
  
                              &lt;tr valign="top"&gt;
                                  &lt;td style="width: 25% !important;"&gt;&lt;label
                                      class="not-required" for="expire-after"&gt;Email:&lt;/label&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="text" id="email" path="#"
                                      class="form-control" /&gt;&lt;/td&gt;
                              &lt;/tr&gt;
  
                          &lt;/tbody&gt;
                      &lt;/table&gt;
  
  
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;div&gt;
                          &lt;input type="submit" id="createNewCustomer" value="Save"
                              class="btn btn-default" onClick="alert('To be Implemented');" /&gt;
                          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>