Ajax/laravel delete methode work only when i click twice - ajax

Question

i'v been searching for 2 days and i didint find an answer , so i made a function to delete a property onclick using ajax. but i have a weird probleme i must click twice on the button to work , i dont know why here is my code :
here is my button :
<a style="cursor: pointer"
id="{{ $i->id }}"
data-name="client/{{ Auth::guard('client')->user()->id }}/proprety"
class="delete tooltip left"
title="Supprimer">
<i class="icon-feather-trash-2"></i>
</a>
and here is my script :
$('table').on('click', '.delete', function() {
var id = $(this).attr("id");
var name = $(this).attr("data-name");
Swal.fire({
title: "Es-vous sûr?",
text: "Vous ne pourrez pas revenir en arrière!",
icon: "warning",
showCancelButton: true,
confirmButtonText: "Oui, supprimez-le!",
cancelButtonText: "Non, annuler!",
reverseButtons: true
}).then(function(result) {
if (result.value) {
$.ajax({
url: "/proprety/" + id,
method: "DELETE",
data: {
"_token": "{{ csrf_token() }}",
"id": id
}
});
Swal.fire(
"Supprimé!",
"Vos données ont été supprimées.",
"success"
)
window.location.href = "/" + name;
// result.dismiss can be "cancel", "overlay",
// "close", and "timer"
} else if (result.dismiss === "cancel") {
Swal.fire(
"Annulé",
"Votre données ont en sécurité :)",
"error"
)
}
});
});
UPDATE : the first button trigger sweetalert , after i confirm on sweetalert for the first time nothing happen , i need to repeat the process and trigger sweetalert again to work
UPDATE 1 : This is my controller to delete property :
/**
* Remove the specified resource from storage.
*
* #param \App\Models\Proprety $proprety
* #return \Illuminate\Http\Response
*/
public function destroy($proprety){
$proprety = Proprety::find($proprety);
Image::where('proprety',$proprety->unique)->delete();
Promotion::where('proprety',$proprety->id)->delete();
$proprety->delete();
return 1;
}

Answer 1

You have to click twice because of the way you wrapped the javascript.
Instead of writing this: $('table').on('click', '.delete', function() { ...
you should write this:
$(document).ready( function() {
$(document).on('click', '.delete', function(){ ...
So your new JS syntax should be
$(document).ready( function() {
$(document).on('click', '.delete', function(){
var id = $(this).attr("id");
var name = $(this).attr("data-name");
Swal.fire({
title: "Es-vous sûr?",
text: "Vous ne pourrez pas revenir en arrière!",
icon: "warning",
showCancelButton: true,
confirmButtonText: "Oui, supprimez-le!",
cancelButtonText: "Non, annuler!",
reverseButtons: true
}).then((result) {
if (result.value) {
$.ajax({
url: "/proprety/" + id,
method: "DELETE",
data: {
"_token": "{{ csrf_token() }}",
"id": id
}
});
Swal.fire(
"Supprimé!",
"Vos données ont été supprimées.",
"success"
)
window.location.href = "/" + name;
// result.dismiss can be "cancel", "overlay",
// "close", and "timer"
} else if (result.dismiss === "cancel") {
Swal.fire(
"Annulé",
"Votre données ont en sécurité :)",
"error"
)
}
});
});
});
EDIT:
here are the syntaxes for done() and fail() functions of sweetalert:
$(document).ready( function() {
$(document).on('click', '.delete', function(){
var id = $(this).attr('id');
var url = "{{ route('delete-susomething', ':id') }}";
url = url.replace(':id', id);
var el = this;
var name = $(this).attr('data-name');
Swal.fire({
title: 'Are you sure? <h6>(Page closes in 10 seconds)</h6>',
html: "Blah Blah",
icon: 'warning',
timer: 10000,
showCancelButton: true,
confirmButtonColor: 'green',
cancelButtonColor: '#d33',
confirmButtonText: 'Go ahead',
cancelButtonText: 'Cancel',
}).then((result) => {
if (result.value){
$.ajax({
url: url,
type: 'POST',
data: {'_method':'DELETE', '_token': '{{ csrf_token() }}'},
dataType: 'json'
})
.done(function(response){
swal.fire('Oh Yeah!', "Successfully Deleted.", response.status);
})
.fail(function(){
swal.fire('Damn!', 'Beats me, but something went wrong! Try again.', 'error');
});
}
})
});
});
now in your controller that deletes the item, after deleting, you need to return a response, so add return 1; at the end of the function that handles the deletion.