Laravel CRUD Series: Editing and Deleting using AJAX

Submitted by: 
Language: 
Visitors have accessed this post 268 times.

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', '<a href="mailto:[email protected]" rel="nofollow">[email protected]</a>');
  2.  
  3. Route::post('/update', '<a href="mailto:[email protected]" rel="nofollow">[email protected]</a>');

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


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.