Eliminare un record dalla tabella utilizzando ajax in laravel 5

Question

Desidero eliminare il record utilizzando ajax.

vista

@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 

regolatore

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 eliminare

$('.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; 
}); 

** Edit 1 **:

Ecco cosa ottengo se ho appena ritorno 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" 

Il fatto è che, questo elimina il prodotto, ma solo la prima riga e non quello che si fa clic.

Desidero eliminare il prodotto su cui si fa clic.

Qualcuno può aiutare?

Answer 1

il problema è qui:

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

Sei solo andando per ottenere il primo, perché stai usando un id duplicato su tutti i pulsanti .. Quindi una query di sfrigolio id ti darà il primo.

Vedrete questo se avete dd ($ id) nel vostro controller di cancellazione. È sempre l'id del primo. Puoi ottenere l'attributo data-id effettuando una query relativa a event.target.

Si vorrà utilizzare il debugger; dichiarazione all'interno della vostra chiamata indietro per testare questo, ma la query dovrebbe essere qualcosa di simile:

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

o

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

Il target dell'evento dovrebbe essere il pulsante che è stato cliccato, e si imposta la data-id su quel pulsante, quindi è sufficiente interrogarlo tramite l'evento.

Answer 2

Dobbiamo inviare una richiesta su come laravel invia la richiesta di eliminare i dati in modalità di richiesta di risposta normale. bisogno di cambiare poco 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; 
}); 

per più di riferimento vedi questo post

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

Answer 3

Come @Rob_vH menzionato, il problema è relativo al modo in cui ottieni l'ID nel tuo JavaScript.Prova a cambiare questo:

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

a questo:

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

Answer 4

provare questo, sostituire il vostro questo 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> 

con,

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

ora reso funzione javascript denominata come,

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