CODEWITHSUNDEEP
htmlajaxlaravellaravel-5eloquent
user10665294
user10665294

Reputation:

Ajax Delete in Laravel

how to delete data in a table without refreshing the page here is my href button

this two buttons are delete one is to archive and one is to force delete the problem is they are refreshing when clicked.

  <td><a href="/admin/clients/archTrash/{{ $client->id }}" class="btn btn-info">Active</a></td>


 <td><a href="/admin/clients/archTrashPermanent/{{ $client->id }}" class="fa fa-trash btn btn-danger"></a></td>

my controller 

    $client = new Client;
    $client->client_code = $request->input('client_code');
    $client->client_name = $request->input('client_name');

   $client->save();

EDITED

Routes

 Route::get('/admin/clients/archTrash/{id}', 'Admin\ClientsController@archTrash');

Route::get('/admin/clients/archTrashPermanent/{id}', 'Admin\ClientsController@archTrashPermanent');

Upvotes: 1

Views: 276

Answers (3)

Antu
Antu

Reputation: 2303

Instead of using Route::get use Route::delete.

In addition to that change the type: 'Put' to type: 'DELETE' in the ajax call.

$Users = UserModel::find($id);
$Users->delete($id);

can be written as:

UserModel::find($id)->delete();

For more help, you may visit those Link1 Link2

Upvotes: 3

kshitij
kshitij

Reputation: 710

Here you need to make two ajax call's to controller using front side. Let's say you are using jquery then:

<td><a href="javascript:void(0);" url="/admin/clients/archTrash/{{ $client->id }}" onClick="deleteAjax(this);" class="btn btn-info">Active</a></td>

Then in jquery function deleteAjax make a call by getting attribute:

function deleteAjax (elm) {
        var element = $(elm);
        ajax({
              url: element.attr('url'),
              type: 'GET',
              success: function(data){
                 console.log(data)
              }
          });
   }

Now in controller simply put deleted_at entry in record to delete temporary purpose i.e. :

      UserModel::where('id', $id)->first()->delete();  //if softdelete is enabled

And then on response simply remove that element.

Same process for force delete.

Hope this helps.

Upvotes: 0

Saurabh Mistry
Saurabh Mistry

Reputation: 13669

in your blade template do like this :

 <td><button type="button" data-client_id="{{ $client->id }}" class="btn-archive btn btn-info">Active</button></td>

<td><button type="button" data-client_id="{{ $client->id }}" class="btn-delete fa fa-trash btn btn-danger"></button></td>

now add below ajax script :

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).on('click','.btn-archive',function(){
   var clientID=$(this).attr('data-client_id');
   var url='/admin/clients/archTrash/'+clientID;
   callAjax(url);
});

$(document).on('click','.btn-delete',function(){
   var clientID=$(this).attr('data-client_id');
   var url='/admin/clients/archTrashPermanent/'+clientID;
   callAjax(url);
});

function callAjax(url){
   $.ajax({
       url:url,
       dataType:'json',
       type:'GET',
       success:function(response){
          console.log(response);
       },
       error:function(err){
         console.log(err);
       }
   });
}
</script>

Upvotes: 0

Related Questions