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

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" 
    
   title="Supprimer">
  <i ></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;
}

CodePudding user response：

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.