Ajax CRUD operations in laravel

 

Hello readers, am back with another tutorial to discuss about performing Create Read Update Delete(CRUD) operations in laravel using ajax.

In previous tutorials like integrating bootgrid plugin there are CRUD operations but they are without ajax, every time the operation is performed the page may reload and show the information. But here all the CRUD operations are performed without any page reload by using ajax and some handy jquery.

Here we will go through a simple example to cover all the CRUD operations.

• Create operation : A simple text field to add some name and save to database.
• Read Operation : Shows all the created items which are stored in database.
• Update Operation : Edits an item which is displayed and then updating the same to database.
• Delete Operation : Delete an item completely from database.

Create Operation using ajax :

A simple text field with add button which is an ajax call to a controller.
The controller validates the input and throws an error if input is empty else it adds a new record in database.
The ajax success function updates the view by appending the newly added data to the existing data.
View for the text field and button,

<div class="form-group row add"> <div class="col-md-8"> <input type="text" class="form-control" id="name" name="name" placeholder="Enter some name" required> <p class="error text-center alert alert-danger hidden"> </p> </div> <div class="col-md-4"> <button class="btn btn-primary" type="submit" id="add"> <span class="glyphicon glyphicon-plus"></span> ADD </button> </div> </div>

1 2 3 4 5 6 7 8 9 10 11 12

<div class="form-group row add">     <div class="col-md-8">         <input type="text" class="form-control" id="name" name="name"             placeholder="Enter some name" required>         <p class="error text-center alert alert-danger hidden"></p>     </div>     <div class="col-md-4">         <button class="btn btn-primary" type="submit" id="add">             <span class="glyphicon glyphicon-plus"></span> ADD         </button>     </div> </div>

When add button is clicked, an ajax call is made to the controller for adding an item.

$("#add").click(function() { $.ajax({ type: 'post', url: '/addItem', data: { '_token': $('input[name=_token]').val(), 'name': $('input[name=name]').val() }, success: function(data) { if ((data.errors)) { $('.error').removeClass('hidden'); $('.error').text(data.errors.name); } else { $('.error').remove(); $('#table').append(" <tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.name + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-name='" + data.name + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-name='" + data.name + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr> "); } }, }); $('#name').val(''); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

$("#add").click(function() {     $.ajax({         type: 'post',         url: '/addItem',         data: {             '_token': $('input[name=_token]').val(),             'name': $('input[name=name]').val()         },         success: function(data) {             if ((data.errors)) {                 $('.error').removeClass('hidden');                 $('.error').text(data.errors.name);             } else {                 $('.error').remove();                 $('#table').append("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.name + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-name='" + data.name + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-name='" + data.name + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");             }         },     });     $('#name').val(''); });

the route for /addItem,

Route::post ( '/addItem', 'IndexController@addItem' );

1	Route::post ( '/addItem', 'IndexController@addItem' );

The controller logic for addItem function,

public function addItem(Request $request) { $rules = array ( 'name' => 'required' ); $validator = Validator::make ( Input::all (), $rules ); if ($validator->fails ()) return Response::json ( array ( 'errors' => $validator->getMessageBag ()->toArray () ) ); else { $data = new Data (); $data->name = $request->name; $data->save (); return response ()->json ( $data ); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

public function addItem(Request $request) {     $rules = array (             'name' => 'required'     );     $validator = Validator::make ( Input::all (), $rules );     if ($validator->fails ())         return Response::json ( array (                                      'errors' => $validator->getMessageBag ()->toArray ()         ) );         else {             $data = new Data ();             $data->name = $request->name;             $data->save ();             return response ()->json ( $data );         } }

Read Operation using ajax :

A table which displays all the records in the database with edit and delete action buttons, and also updates the data when a new item is added.
the route,

Route::get ( '/', 'IndexController@readItems' );

1	Route::get ( '/', 'IndexController@readItems' );

The controller logic for readItems function,

public function readItems(Request $req) { $data = Data::all (); return view ( 'welcome' )->withData ( $data ); }

1 2 3 4

public function readItems(Request $req) {     $data = Data::all ();     return view ( 'welcome' )->withData ( $data ); }

The view for displaying data,

<div class="table-responsive text-center"> <table class="table table-borderless" id="table"> <thead> <tr> <th class="text-center">#</th> <th class="text-center">Name</th> <th class="text-center">Actions</th> </tr> </thead> @foreach($data as $item) <tr class="item{{$item->id}}"> <td>{{$item->id}}</td> <td>{{$item->name}}</td> <td><button class="edit-modal btn btn-info" data-id="{{$item->id}}" data-name="{{$item->name}}"> <span class="glyphicon glyphicon-edit"></span> Edit </button> <button class="delete-modal btn btn-danger" data-id="{{$item->id}}" data-name="{{$item->name}}"> <span class="glyphicon glyphicon-trash"></span> Delete </button></td> </tr> @endforeach </table> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<div class="table-responsive text-center">     <table class="table table-borderless" id="table">         <thead>             <tr>                 <th class="text-center">#</th>                 <th class="text-center">Name</th>                 <th class="text-center">Actions</th>             </tr>         </thead>         @foreach($data as $item)         <tr class="item{{$item->id}}">             <td>{{$item->id}}</td>             <td>{{$item->name}}</td>             <td><button class="edit-modal btn btn-info" data-id="{{$item->id}}"                     data-name="{{$item->name}}">                     <span class="glyphicon glyphicon-edit"></span> Edit                 </button>                 <button class="delete-modal btn btn-danger" data-id="{{$item->id}}"                     data-name="{{$item->name}}">                     <span class="glyphicon glyphicon-trash"></span> Delete                 </button></td>         </tr>         @endforeach     </table> </div>

ajax CRUD operations in laravel – justlaravel.com

     Project on Github

Update Operation using ajax :

When edit button is clicked, then a modal pops up, enabling to edit the name and update button calls a controller with edit operation performed.
Here we use same modal for edit and delete operations by changing the content in it with respect to what button is clicked.
When edit button is clicked, the following jQuery is executed,

$(document).on('click', '.edit-modal', function() { $('#footer_action_button').text(" Update"); $('#footer_action_button').addClass('glyphicon-check'); $('#footer_action_button').removeClass('glyphicon-trash'); $('.actionBtn').addClass('btn-success'); $('.actionBtn').removeClass('btn-danger'); $('.actionBtn').addClass('edit'); $('.modal-title').text('Edit'); $('.deleteContent').hide(); $('.form-horizontal').show(); $('#fid').val($(this).data('id')); $('#n').val($(this).data('name')); $('#myModal').modal('show'); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$(document).on('click', '.edit-modal', function() {         $('#footer_action_button').text(" Update");         $('#footer_action_button').addClass('glyphicon-check');         $('#footer_action_button').removeClass('glyphicon-trash');         $('.actionBtn').addClass('btn-success');         $('.actionBtn').removeClass('btn-danger');         $('.actionBtn').addClass('edit');         $('.modal-title').text('Edit');         $('.deleteContent').hide();         $('.form-horizontal').show();         $('#fid').val($(this).data('id'));         $('#n').val($(this).data('name'));         $('#myModal').modal('show');     });

Above code opens up a modal with id and a name which can be edited with update and close buttons. When update button is clicked the logic for updation is performed.

$('.modal-footer').on('click', '.edit', function() { $.ajax({ type: 'post', url: '/editItem', data: { '_token': $('input[name=_token]').val(), 'id': $("#fid").val(), 'name': $('#n').val() }, success: function(data) { $('.item' + data.id).replaceWith(" <tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.name + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-name='" + data.name + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-name='" + data.name + "' ><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr> "); } }); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$('.modal-footer').on('click', '.edit', function() {         $.ajax({             type: 'post',             url: '/editItem',             data: {                 '_token': $('input[name=_token]').val(),                 'id': $("#fid").val(),                 'name': $('#n').val()             },             success: function(data) {                 $('.item' + data.id).replaceWith("<tr class='item" + data.id + "'><td>" + data.id + "</td><td>" + data.name + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-name='" + data.name + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-name='" + data.name + "' ><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>");             }         });     });

the controller logic when /editItem is called,

public function editItem(Request $req) { $data = Data::find ( $req->id ); $data->name = $req->name; $data->save (); return response ()->json ( $data ); }

1 2 3 4 5 6

public function editItem(Request $req) {         $data = Data::find ( $req->id );         $data->name = $req->name;         $data->save ();         return response ()->json ( $data );     }

ajax CRUD operations in laravel – justlaravel.com

Delete Operation using ajax :

Similar to edit operation. when delete button is clicked with its respected row, a modal pops up, and the delete button in the modal deletes the item from database and finally updating the view using jQuery.
When delete button is clicked, the following jQuery executes,

$(document).on('click', '.delete-modal', function() { $('#footer_action_button').text(" Delete"); $('#footer_action_button').removeClass('glyphicon-check'); $('#footer_action_button').addClass('glyphicon-trash'); $('.actionBtn').removeClass('btn-success'); $('.actionBtn').addClass('btn-danger'); $('.actionBtn').addClass('delete'); $('.modal-title').text('Delete'); $('.did').text($(this).data('id')); $('.deleteContent').show(); $('.form-horizontal').hide(); $('.dname').html($(this).data('name')); $('#myModal').modal('show'); });

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$(document).on('click', '.delete-modal', function() {         $('#footer_action_button').text(" Delete");         $('#footer_action_button').removeClass('glyphicon-check');         $('#footer_action_button').addClass('glyphicon-trash');         $('.actionBtn').removeClass('btn-success');         $('.actionBtn').addClass('btn-danger');         $('.actionBtn').addClass('delete');         $('.modal-title').text('Delete');         $('.did').text($(this).data('id'));         $('.deleteContent').show();         $('.form-horizontal').hide();         $('.dname').html($(this).data('name'));         $('#myModal').modal('show');     });

When delete button in the modal is clicked,

$('.modal-footer').on('click', '.delete', function() { $.ajax({ type: 'post', url: '/deleteItem', data: { '_token': $('input[name=_token]').val(), 'id': $('.did').text() }, success: function(data) { $('.item' + $('.did').text()).remove(); } }); });

1 2 3 4 5 6 7 8 9 10 11 12 13

$('.modal-footer').on('click', '.delete', function() {         $.ajax({             type: 'post',             url: '/deleteItem',             data: {                 '_token': $('input[name=_token]').val(),                 'id': $('.did').text()             },             success: function(data) {                 $('.item' + $('.did').text()).remove();             }         });     });

the controller logic for deletion,

public function deleteItem(Request $req) { Data::find ( $req->id )->delete (); return response ()->json (); }

1 2 3 4

public function deleteItem(Request $req) {         Data::find ( $req->id )->delete ();         return response ()->json ();     }

ajax CRUD operations in laravel – justlaravel.com