1
Answer

Update Record .

Ramco Ramco

Ramco Ramco
3y
459
1
Hi
 
I have below code & i want when user Clicks on Edit then in Modal Update & Cancel should get displayed.
 
Modal Title should get changed to Update
  1. <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  
  2. <div class="modal-dialog">  
  3. <div class="modal-content">  
  4. <div class="modal-header">  
  5. <h4 class="modal-title">Add New Location</h4>  
  6. <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
  7. </div>  
  8. <div class="modal-body">  
  9. <div class="form-horizontal">  
  10. <div class="form-group">  
  11. <label for="Name">Location Id</label>  
  12. <input type="text" class="form-control" id="txtId" placeholder="Location Id" />  
  13. </div>  
  14. <div class="form-group">  
  15. <label for="Name">Location Name</label>  
  16. <input type="text" class="form-control" id="txtDescription" placeholder="Location Name" />  
  17. </div>  
  18. </div>  
  19. </div>  
  20. <div class="modal-footer">  
  21. <button type="button" class="btn btn-outline-dark" data-dismiss="modal">Cancel</button>  
  22. <button type="button" class="btn btn-primary" id="btnAdd" onclick="return Add();"><span class="glyphicon glyphicon-ok"></span>Save Changes</button>  
  23. <button type="button" class="btn btn-primary" id="btnUpdate" style="display:none;" onclick="Update();">Update</button>  
  24. </div>  
  25. </div>  
  26. </div>  
  27. </div>  
  1. $(document).ready(function () {  
  2. $("#tblLocation").dataTable({  
  3. ajax: {  
  4. type: "get",  
  5. url: "/Location/List",  
  6. dataType: "json",  
  7. dataSrc: ""  
  8. },  
  9. paging: true,  
  10. sort: true,  
  11. pageLength: 5,  
  12. searching: true,  
  13. columns: [  
  14. { 'data': 'Id' },  
  15. { 'data': 'Description' },  
  16. {  
  17. //"data": null,  
  18. "defaultContent": '<input type="button" id="btnEdit" class="btn btn-primary" value="Edit" />'  
  19. }  
  20. ]  
  21. });  
  22. $('body').on('click', '[id*=btnEdit]', function () {  
  23. var data = $(this).parents('tr').find('td');  
  24. var id = data.eq(0).html();  
  25. var description = data.eq(1).html();  
  26. $('[id*=txtId]').val(id);  
  27. $('[id*=txtDescription]').val(description);  
  28. $('#myModal').modal("show");  
  29. });  
  30. });  
  31. function Update() {  
  32. var res = validate();  
  33. if (res == false) {  
  34. return false;  
  35. }  
  36. var objLocation = {  
  37. Id: $('#txtId').val().toUpperCase(),  
  38. Description: $('#txtDescription').val().toUpperCase()  
  39. };  
  40. $.ajax({  
  41. url: "/Location/Update",  
  42. data: JSON.stringify(objLocation),  
  43. type: "POST",  
  44. contentType: "application/json;charset=utf-8",  
  45. dataType: "json",  
  46. success: function (result) {  
  47. $('#tblLocation').DataTable().ajax.reload();  
  48. $('#myModal').modal('hide');  
  49. clearTextBox();  
  50. },  
  51. error: function (errormessage) {  
  52. alert(errormessage.responseText);  
  53. }  
  54. });  
  55. }  
Thanks
Answers (1)
Next Recommended Forum