Delete a record from table using ajax in laravel 5

Question

I want to delete the record using ajax.

view

@foreach( $products as $product )
    
        {{ $product->code         


        

Answer 1

As @Rob_vH mentioned, your problem is with how you're getting the ID in your JavaScript. Try changing this:

var dataId = $('#btnDeleteProduct').attr('data-id');

to this:

var dataId = $(this).attr('data-id');

Answer 2

Your problem is here:

var dataId = $('#btnDeleteProduct').attr('data-id');

You are only going to get the first one, because you are using a duplicate id on all buttons.. So an id sizzle query will get you the first one.

You will see this if you dd($id) in your delete controller. It's always the id of the first. You can get the data-id attribute by querying relative to event.target.

You will want to use the debugger; statement inside your call back to test this, but the query should be something like:

$(e.target).attr('data-id');

or

$(this).attr('data-id');

The event target should be the button that was clicked, and you set the data-id on that button, so you just need to query it via the event.

Answer 3

We have to send request how laravel sending request for delete data in normal request response way. need to change little html

<button type="button" class="deleteProduct" data-token="{{ csrf_token() }}">Confirm</button>

$('.deleteProduct').on('click', function(e) {
    var inputData = $('#formDeleteProduct').serialize()+"&_method=delete&_token="+$(this).data(token);

    var dataId = $('#btnDeleteProduct').attr('data-id');

    $.ajax({
        url: '{{ url('/admin/products') }}' + '/' + dataId,
        type: 'POST',
        data: inputData,
        success: function( msg ) {
            if ( msg.status === 'success' ) {
                toastr.success( msg.msg );
                setInterval(function() {
                    window.location.reload();
                }, 5900);
            }
        },
        error: function( data ) {
            if ( data.status === 422 ) {
                toastr.error('Cannot delete the category');
            }
        }
    });

    return false;
});

for more reference see this post

http://laravel.io/forum/02-20-2014-sending-a-delete-request-via-ajax

Answer 4

try This,replace your this div,

<div id="deleteTheProduct">
                {!! Form::open(['method' => 'DELETE', 'id' => 'formDeleteProduct', 'action' => ['AdminProductsController@destroy', $product->id]]) !!}
                    {!! Form::button( '<i class="fa fa-trash fa-lg"></i>', ['type' => 'submit', 'class' => 'delete text-danger deleteProduct','id' => 'btnDeleteProduct', 'data-id' => $product->id ] ) !!}
               {!! Form::close() !!}
</div>

with,

<input type='button' Value='Delete' onclick='deleteProduct($(this))' product_id='{!!$product->id!!}'/>

now made javascript function named as,

function deleteProduct(ele){
var product_id = ele.attr('product_id');
//Your Delete Product Ajax Code....
}