How to populate a modal form with ajax and spring MVC

Question

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.

Below is code Snippet, the line

Edit Customer Detail

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?

I saw this solution( Spring MVC Populate Modal Form ) 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.

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

My Modal to edit:

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

Try this, put a hidden value for the customer Id in your edit model,

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

Change your submit button into ordinary button for save the customer.

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

You can play with js, specially into the ajax,

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