Xóa bản ghi khỏi bảng bằng ajax trong laravel 5

Question

Tôi muốn xóa bản ghi bằng ajax.

xem

@foreach($products as $product) 
    <tr> 
     <td>{{ $product->code }}</td> 
     <td>{{ $product->name }}</td> 
     <td>{{ $product->display }}</td> 
     <?php $time = date('d M, Y h:i:s A', strtotime($product->created_at)); ?> 
     <td>{{ $time }}</td> 
     <td> 
      <a href="{{ url('/admin/products/' . $product->id . '/edit') }}" class="links-dark edits pull-left"> 
       <i class="fa fa-edit fa-lg"></i> 
      </a> 
      <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> 
     </td> 
    </tr> 
@endforeach 

khiển

public function destroy($id, Request $request) { 
    $product = Product::findOrFail($id); 

    if ($request->ajax()) { 
     $product->delete($request->all()); 

     return response(['msg' => 'Product deleted', 'status' => 'success']); 
    } 
    return response(['msg' => 'Failed deleting the product', 'status' => 'failed']); 
} 

ajax xóa

$('.deleteProduct').on('click', function(e) { 
    var inputData = $('#formDeleteProduct').serialize(); 

    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; 
}); 

** Sửa 1 **:

Dưới đây là những gì tôi nhận được nếu tôi chỉ trả lại console.log (msg)

Object { 
    id: "1", 
    code: "PROD-521420", 
    name: "Testing the product name", 
    category_id: "3", 
    short_description: "This is the short description"… 
} 
category_id: "3" 
code: "PROD-521420" 
created_at: "2015-06-07 23:00:31" 
deleted_at: null 
description: "This is the long description" 
discount_price: "125.00" 
display: "Enabled" 
id: "1" 
meta_description: "This is the meta description" 
meta_keywords: "This is the meta keywords" 
meta_title: "This is the meta title" 
name: "Testing the product name" 
price: "150.00" 
short_description: "This is the short description" 
updated_at: "2015-06-08 10:04:26" 

Cái này là, điều này xóa sản phẩm, nhưng chỉ hàng đầu tiên và không phải là một trong đó là nhấp vào.

Tôi muốn xóa sản phẩm được nhấp.

Có ai giúp được không?

Answer 1

Vấn đề của bạn là ở đây:

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

Bạn chỉ sẽ nhận được một trong những đầu tiên, bởi vì bạn đang sử dụng một id trùng lặp trên tất cả các nút .. Vì vậy, một id sizzle truy vấn sẽ giúp bạn có được một trong những đầu tiên.

Bạn sẽ thấy điều này nếu bạn dd ($ id) trong bộ điều khiển xóa. Nó luôn là id của cái đầu tiên. Bạn có thể lấy thuộc tính data-id bằng cách truy vấn liên quan đến event.target.

Bạn sẽ muốn sử dụng trình gỡ lỗi; tuyên bố trong cuộc gọi của bạn trở lại để kiểm tra này, nhưng truy vấn nên một cái gì đó như:

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

hoặc

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

Mục tiêu sự kiện nên là nút nào được nhấn, và bạn thiết lập các dữ liệu id trên nút đó, vì vậy bạn chỉ cần truy vấn nó thông qua sự kiện.

Answer 2

Chúng tôi phải gửi yêu cầu cách laravel gửi yêu cầu xóa dữ liệu theo cách phản hồi yêu cầu bình thường. cần thay đổi chút 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; 
}); 

để tham khảo nhiều thấy bài đăng này

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

Answer 3

Như @Rob_vH đã đề cập, vấn đề của bạn là cách bạn nhận được ID trong JavaScript của mình.Hãy thử thay đổi này:

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

này:

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

Answer 4

thử này, thay thế div này của bạn,

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

với,

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

nay đã javascript hàm có tên như,

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