I'm having trouble setting up the AJAX delete method. I keep getting a 500 internal server error and despite following tutorials, I remain frustrated. Can someone please help me correct my code?
This is using Laravel 5.8 and jQuery 3.3.
<section class="section">
<div class="section-header">
<h1>Our Products</h1>
<div class="section-header-button">
<button id="createProduct" class="btn btn-primary">Add New</button>
</div>
</div>
<div class="section-body">
<div class="row mt-4">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4>All Items</h4>
</div>
<div class="card-body">
<div class="clearfix mb-3"></div>
<div class="table-responsive">
<table id="itemList" class="table table-striped">
<thead>
<tr>
<th>Product Code</th>
<th>Product Name</th>
<th>Categories</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody id="dataTable">
@include('product.table')
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div class="modal fade" id="tambahProductModalLong" tabindex="-1" role="dialog" aria-labelledby="tambahProductModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="tambahProductModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="addProductForm">
@csrf
<input type="hidden" name="id" id="id">
<input type="hidden" name="product_code" id="productCode">
<div class="modal-body">
<div class="form-group">
<div class="section-title">Product Name</div>
<input required id="name" type="text" name="name" class="form-control">
</div>
<div class="form-group">
<div class="section-title">Categories</div>
<select name="categories" class="form-control select2">
@foreach($categories as $c)
<option value="{{$c->id}}">{{$c->name}}</option>
@endforeach
</select>
</div>
<div class="form-group">
<div class="section-title">Price</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
IDR
</div>
</div>
<input required id="price" type="number" name="price" class="form-control currency">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" id="saveButton" class="btn btn-primary"></button>
</div>
</form>
</div>
</div>
</div>
@foreach($products as $p)
<tr>
<td>{{$p->code}}</td>
<td>{{$p->name}}</td>
<td>{{$cat = App\Category::where('id', $p->categories_id)->first()->name}}</td>
<td>IDR {{number_format($p->price)}}</td>
<td>
<a id="editProduct" data-id="{{$p->id}}" href="#" class="btn btn-icon edit btn-sm btn-primary">
<i class="far fa-edit"></i>
</a>
<a id="deleteProduct" data-id="{{$p->id}}" href="#" class="btn btn-icon delete btn-sm btn-danger">
<i class="far fa-trash-alt"></i>
</a>
</td>
</tr>
@endforeach
Here is my AJAX method:
function load() {
$.ajax({
url: "{{route('product.load')}}",
success: function(response) {
$('#dataTable').html(response);
}
});
}
$.ajaxSetup({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
}
});
//delete
$('.delete').click(function(e) {
e.preventDefault();
// console.log(1);
var id = $(this).data(id);
// console.log(id);
confirm("Are you sure want to delete?");
$.ajax({
type: "DELETE",
data: {
"id": id,
"_token": "{{csrf_token()}}"
},
url: "/product/" + id,
success: function(data) {
if (data.status == "sukses") {
alert("data berhasil dihapus");
load();
} else {
alert("data gagal dihapus");
}
}
});
});
Routes:
Route::delete('/{id}', ['as' => 'destroy', 'uses' => 'ProductContntroller@destroy']);
public function destroy($id)
{
Product::destroy($id);
$response['status'] = "sukses";
return Response::json($response);
}
I am encountering an error in the console that looks like this:
localhost::8000/product/[Object%20object]