javascript - How to populate a modal form with ajax and spring MVC -
i have jsp see result saved @ data base in table on browser options edit, delete each row. want able click edit link, fetch data particular customer data base spring mvc , hibernate , show on edit modal user can see data , know edit.
below code snippet, line
i saw solution(spring mvc populate modal form) doesnt show how modal called populate values ajax. or there other way? please help, thanks.
<c:foreach var="customer" items="${customers}" varstatus="status"> <tr> <td><c:out value="${status.count}" /></td> <td><a title="go 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">×</button> <h4 class="modal-title">confirm delete</h4> </div> <div class="modal-body"> <p>are sure want delete 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 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">×</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 implemented');" /> <button type="button" class="btn btn-default" data-dismiss="modal">close</button> </div> </div> </div> </div> </div>
try this, put hidden value customer id in edit model,
<input type="hidden" id="customerid" path="customerid" class="form-control" /> change submit button ordinary button save 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 js, specially 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>
Comments
Post a Comment