Skip to main content

Laravel CRUD Series: Editing and Deleting using AJAX


Getting Started

For the last part of this CRUD series, we're going to continue our work in the previous tutorial Laravel CRUD Series: Inserting Data using AJAX.

Creating our Edit and Delete Modal

In our modal.blade.php, add the ff codes to create our edit and delete modal.

  1. <!-- Edit Modal -->
  2. <div class="modal fade" id="editmodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  3. <div class="modal-dialog" role="document">
  4. <div class="modal-content">
  5. <div class="modal-header">
  6. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  7. <h4 class="modal-title text-center" id="myModalLabel">Edit Member</h4>
  8. </div>
  9. <div class="modal-body">
  10. <form action="{{ URL::to('update') }}" id="editForm">
  11. <input type="hidden" id="memid" name="id">
  12. <div class="form-group">
  13. <div class="row">
  14. <div class="col-md-2" style="margin-top:7px;">
  15. <label for="firstname">Firstname</label>
  16. </div>
  17. <div class="col-md-10">
  18. <input type="text" name="firstname" id="firstname" class="form-control">
  19. </div>
  20. </div>
  21. </div>
  22. <div class="form-group">
  23. <div class="row">
  24. <div class="col-md-2" style="margin-top:7px;">
  25. <label for="lastname">Lastname</label>
  26. </div>
  27. <div class="col-md-10">
  28. <input type="text" name="lastname" id="lastname" class="form-control">
  29. </div>
  30. </div>
  31. </div>
  32. </div>
  33. <div class="modal-footer">
  34. <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
  35. <button type="submit" class="btn btn-success"><i class="fa fa-check-square-o"></i> Update</button>
  36. </form>
  37. </div>
  38. </div>
  39. </div>
  40. </div>
  41.  
  42. <!-- Delete Modal -->
  43. <div class="modal fade" id="deletemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  44. <div class="modal-dialog" role="document">
  45. <div class="modal-content">
  46. <div class="modal-header">
  47. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  48. <h4 class="modal-title text-center" id="myModalLabel">Delete Member</h4>
  49. </div>
  50. <div class="modal-body">
  51. <h4 class="text-center">Are you sure you want to delete Member?</h4>
  52. </div>
  53. <div class="modal-footer">
  54. <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Cancel</button>
  55. <button type="button" id="deletemember" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
  56. </div>
  57. </div>
  58. </div>
  59. </div>

Adding our Edit and Delete Scripts

Next, update our script in show.blade.php with the ff codes:

  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.  
  4. $.ajaxSetup({
  5. headers: {
  6. 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  7. }
  8. });
  9.  
  10. showMember();
  11.  
  12. $('#add').click(function(){
  13. $('#addnew').modal('show');
  14. $('#addForm')[0].reset();
  15. });
  16.  
  17. $('#addForm').on('submit', function(e){
  18. e.preventDefault();
  19. var form = $(this).serialize();
  20. var url = $(this).attr('action');
  21. $.ajax({
  22. type: 'POST',
  23. url: url,
  24. data: form,
  25. dataType: 'json',
  26. success: function(){
  27. $('#addnew').modal('hide');
  28. showMember();
  29. }
  30. });
  31. });
  32.  
  33. $(document).on('click', '.delete', function(){
  34. var id = $(this).data('id');
  35. $('#deletemodal').modal('show');
  36. $('#deletemember').val(id);
  37. });
  38.  
  39. $('#deletemember').click(function(){
  40. var id = $(this).val();
  41. $.post("{{ URL::to('delete') }}",{id:id}, function(){
  42. $('#deletemodal').modal('hide');
  43. showMember();
  44. })
  45. });
  46.  
  47. $(document).on('click', '.edit', function(){
  48. var id = $(this).data('id');
  49. var firstname = $(this).data('first');
  50. var lastname = $(this).data('last');
  51. $('#editmodal').modal('show');
  52. $('#firstname').val(firstname);
  53. $('#lastname').val(lastname);
  54. $('#memid').val(id);
  55. });
  56.  
  57. $('#editForm').on('submit', function(e){
  58. e.preventDefault();
  59. var form = $(this).serialize();
  60. var url = $(this).attr('action');
  61. $.post(url,form,function(data){
  62. $('#editmodal').modal('hide');
  63. showMember();
  64. })
  65. });
  66. });
  67.  
  68. function showMember(){
  69. $.get("{{ URL::to('show') }}", function(data){
  70. $('#memberBody').empty().html(data);
  71. })
  72. }
  73. </script>

Updating our MemberController

Next, open our MemberController and add the ff codes for our edit and delete.

  1. public function delete(Request $request){
  2. if ($request->ajax()){
  3. Member::destroy($request->id);
  4. }
  5. }
  6.  
  7. public function update(Request $request){
  8. if ($request->ajax()){
  9. $member = Member::find($request->id);
  10. $member->firstname = $request->input('firstname');
  11. $member->lastname = $request->input('lastname');
  12.  
  13. $member->update();
  14. return response($member);
  15. }
  16. }

Creating our Route

Next, we add the routes of our edit and delete. You can do so by opening web.php located in routes folder.

  1. Route::post('/delete', '[email protected]');
  2.  
  3. Route::post('/update', '[email protected]');

Running our Server

Lastly, we run our server by typing our localhost name in our web browser. In my case, mysite.dev.

You should now be able to CRUD which is to Create, Read, Update and Delete.

That ends this tutorial and series. Happy Coding :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.