Twitter Bootstrap Question posted in

PHP Laravel : Delete Data using Ajax – Twitter bootstrap

I want to delete some data from database using ajax.. I’ve done the following steps to run..But while I was trying to delete it’s shows following Error:

Failed to load resource: the server responded with a status of 404
(Not Found)

Here is my route:

Route::post('/delete/{id}',[
    'uses'=>'ItemController@delete',
    'as' => 'delete'
    ]);

Here is the controller:

public function delete($id)
        {
           Item::find($id)->delete();
            return Redirect::back();            
        }

And here is my view page:

<html>
    <head>
        <title> Item List</title>
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    </head>

    <body>
            <div class="container">
                <h3> List Of Courses </h3></br>

                <table class="table table-striped table-bordered dataTable" id="example">
                <thead>
                <tr>
                    <td>Serial No</td>
                    <td>Title</td>
                    <td>Description</td>                    
                    <td>Action</td>
                </tr>
                </thead>
                <tbody>
                <?php $i=1; ?>
                @foreach($items as $row)

                    <tr>
                        <td>{{$i}}</td>
                        <td>{{$row->title }}</td>
                        <td>{{$row->description}}</td>                      
                        <td>    
                            <button type="button" onclick="deleteItem({{ $row->id }})" id="Reco" class="btn btn-danger">Delete</button>         
                        </td>
                    </tr>

                <?php $i++; ?>

                @endforeach
                </tbody>
            </table>
            </div>

            <script>
            function deleteItem(id) {
                $.ajaxSetup({
                        headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
             });
          $.ajax({ 
                    type: "POST", 
                    url: '/delete/'+id,               

                    success: function(result) {
                          console.log(result);
                        }
                });          
            }
            </script>
    </body>
</html>

If anyone find the error I’ve done, hope you’ll help me to find it out.

Tags:

5

Answers


  1. 0

    Try this:

    $.ajax({ 
    type: "POST", 
    url: url('/delete'),   // The correct way to call ajax function in laravel
    data:{
        id: id
    },     
    success: function(result) {
          console.log(result);
        }
});
    Login or Signup to reply.
  2. 0

    Generally passing parameter while deleting is not a good idea. since we can delete the data through url e.g /delete/4 while you may want to delete only after clicking the delete button.

     $.ajax({ 
           type: "POST", 
           url: "{{url('/delete)}}",               
           data:{id:id}
           success: function(result) {
           console.log(result);
           }
       });

    route:

    Route::post('/delete',[
    'uses'=>'ItemController@delete',
    'as' => 'delete'
    ]);

    and, the controller

    public function delete(Request $request)
{
   $id=$request->id;
   Item::where(['id'=>$id])->delete();
   return Redirect::back();            
}
    Login or Signup to reply.
  3. 0

    You can set a method destroy in your controller which laravel automatically uses for deleting. It accepts id.

    public function destroy($id){
    Item::find($id)->delete();
    echo 'Deleted Successfully.';
    }

    for ajax just send a method delete with your token.

    jQuery.ajax({
    url:'your-controller-route/id',
    type: 'post',
    data: {_method: 'delete', _token :token},
    success:function(msg){
    // do stuff
    }
    });

    Login or Signup to reply.
  4. 0

    try this code 

    function deleteItem(id) {
var _token = $("input[name='_token']").val();
 $.ajax({
    type: "POST",
    url: '/task/'+id,
    data: '_method=DELETE&_token=' + _token,
    success: function (result) {
        console.log(result);
    }
 });
}
    Login or Signup to reply.
  5. 0

    Try this code:

    function deleteItem(id) {
$.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
             }
            });
            $.ajax({ 
           type: "POST", 
           url:"{{url('delete')}}", 
           data:{id:id},
           success: function(result) {
           location.reload();
           }
       }); 
          }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search