DELETE with AJAX (Jquery) not working with Laravel 5.2 - php

Question

I'm trying to delete a row in db with Jquery / Ajax.
I have followed this thread but I can't make it working.
Here is my view:
#foreach($tournaments as $tournament)
<tr id="line" data-id="{{$tournament->id}}">
<td>
{{ $tournament->id }}
</td>
<td>{{ $tournament->owner->name}}</td>
<td class="text-center">
{!! Form::open(['method' => 'DELETE', 'id' => 'formDeleteTourament', 'action' => ['TournamentController#destroy', $tournament->id]]) !!}
{!! Form::button( '<i class="glyphicon glyphicon-remove"></i>', ['class' => 'btn text-warning-600 btn-flat btnDeleteTournament', 'data-id' => $tournament->id ] ) !!}
{!! Form::close() !!}
</td>
</tr>
#endforeach
<script>
$(function () {
$('#.tnDeleteTournament').on('click', function (e) {
var inputData = $('#formDeleteTourament').serialize();
var dataId = $('.btnDeleteTournament').attr('data-id');
console.log(inputData); // displays: _method=DELETE&_token=tGFhaAr5fVhDXEYL3SaXem3WaTNJlSdFEkaVDe9F
console.log(dataId); // displays 1
var $tr = $(this).closest('tr');
swal({
title: "Are you sure?",
text: "You will not be able to recover this Tournament!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#EF5350",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel pls!",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
e.preventDefault();
$.ajax(
{
type: 'POST', // I tried with DELETE too
url: '{{ url('/tournaments/') }}' + dataId,
data: inputData,
success: function (msg) {
console.log('success'); // It triggers!
$tr.find('td').fadeOut(1000, function () {
$tr.remove();
});
swal({
title: "Deleted!",
text: "Tournament has been deleted.",
confirmButtonColor: "#66BB6A",
type: "success"
});
},
error: function () {
swal("Oops", "We couldn't connect to the server!", "error");
}
}
)
}
else {
swal({
title: "Cancelled",
text: "Your Tournament is safe :)",
confirmButtonColor: "#2196F3",
type: "error"
});
}
});
});
});
Here is my contoller:
public function destroy(Tournament $tournament)
{
$tournament->delete();
return response(['msg' => 'Product deleted', 'status' => 'success']);
}
Before, I had it working without AJAX so route is OK.
Everything works fine (modals shows) but it doesn't delete my tournament
I am new to JS / JQuery, so I don't know what's going on.
Any idea how to fix it?

Answer 1

You need to pretty much change all your references to use class as a selector. I am only guessing on the Laravel stuff, also make your id's unique (I appended tournament Id), but it all needs to change to class:
Guessing on this, not familiar with the syntax
#foreach($tournaments as $tournament)
<tr id="line{{$tournament->id}}" data-id="{{$tournament->id}}" class="parentTr">
<td>
{{ $tournament->id }}
</td>
<td>{{ $tournament->owner->name}}</td>
<td class="text-center">
{!! Form::open(['method' => 'DELETE', 'class' => 'formDeleteTourament', 'action' => ['TournamentController#destroy', $tournament->id]]) !!}
{!! Form::button( '<i class="glyphicon glyphicon-remove"></i>', ['class' => 'btn text-warning-600 btn-flat btnDeleteTournament', 'data-id' => $tournament->id ] ) !!}
{!! Form::close() !!}
</td>
</tr>
#endforeach
Javascript Changes
<script>
$(function () {
$('.btnDeleteTournament').on('click', function (e) {
var inputData = $(this).parents('.formDeleteTourament').serialize();
var dataId = $(this).data('id');
var $tr = $(this).closest('tr');
swal({
title: "Are you sure?",
text: "You will not be able to recover this Tournament!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#EF5350",
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel pls!",
closeOnConfirm: false,
closeOnCancel: false
},
function (isConfirm) {
if (isConfirm) {
e.preventDefault();
$.ajax({
// I don't you know if you have to escape the inner
// quotes or not, that is a framework syntax thing
url: '{{ url('/tournaments/') }}',
type: 'POST',
// Just include the id in a post data object
data: { form: inputData, id: dataId },
success: function (msg)
{
console.log(msg);
$tr.find('td').fadeOut(1000, function() {
$tr.remove();
});
swal({
title: "Deleted!",
text: "Tournament has been deleted.",
confirmButtonColor: "#66BB6A",
type: "success"
});
},
error: function()
{
swal("Oops", "We couldn't connect to the server!", "error");
}
});
}
else {
swal({
title: "Cancelled",
text: "Your Tournament is safe :)",
confirmButtonColor: "#2196F3",
type: "error"
});
}
});
});
});
</script>