sweetalert для удаления предупреждений в приложении Laravel

Question

Я пытаюсь сделать предупреждение об удалении с помощью sweetalert, но всякий раз, когда я подтверждаю, что delete из sweetalert, первая строка таблицы удаляется всегда. Даже если я попытаюсь удалить, например, третью строку из таблицы, sweetalert удалит первую строку.

Как я могу исправить свой код?

<tbody> 
     @foreach($album_names as $album) 
     <tr> 
      <td>{{ $album->album_name }}</td> 
      <td> 
      {!! Form::open(['route' => ['album.destroy',$album->id], 'method' => 'delete','id'=>'delete_form']) !!} 
      <button class="btn btn-danger" id="delete">Delete</button> 
      <script type="text/javascript"> 
        $('button#delete').on('click', function(e){ 
         e.preventDefault(); 
         swal({ 
          title    : "Are you sure?", 
          text    : "You will not be able to recover this Album!", 
          type    : "warning", 
          showCancelButton : true, 
          confirmButtonColor: "#DD6B55", 
          confirmButtonText : "Yes, delete it!", 
          cancelButtonText : "No, Cancel delete!", 
          closeOnConfirm : false, 
          closeOnCancel  : false 
         }, 
        function(isConfirm){ 
        if(isConfirm){ 
         swal("Deleted!","your album has been deleted", "success"); 
         setTimeout(function() { 
         $("#delete_form").submit(); 
         }, 2000); // 1 second delay 
        } 
        else{ 
         swal("cancelled","Your album is safe", "error"); 
        } 
        } 
      );}); 
      </script> 
       {!! Form::close() !!} 
      </td> 
     </tr> 
     @endforeach 
    </tbody> 

Answer 1

Проблема в том, что вы генерируете все это в цикле. Каждая кнопка удаления имеет идентификатор «#delete», и каждая форма имеет идентификатор «#delete_form», но есть много кнопок и форм, каждый с одинаковым идентификатором.

Вы не просматриваете свой селектор, чтобы узнать, какую форму отправить. Переключите свои идентификаторы в классы и не забудьте выбрать форму, на основе которой была нажата кнопка.

В качестве примера, ваш код может быть изменен на что-то вроде этого:

@foreach($album_names as $album) 
    <tr> 
     <td>{{ $album->album_name }}</td> 
     <td> 
     {!! Form::open(['route' => ['album.destroy',$album->id], 'method' => 'delete','class'=>'delete_form']) !!} 
     <button class="btn btn-danger delete-btn">Delete</button> 
      {!! Form::close() !!} 
     </td> 
    </tr> 
@endforeach 
<script type="text/javascript"> 
    $('button.delete-btn').on('click', function(e){ 
     e.preventDefault(); 
     var self = $(this); 
     swal({ 
      title    : "Are you sure?", 
      text    : "You will not be able to recover this Album!", 
      type    : "warning", 
      showCancelButton : true, 
      confirmButtonColor: "#DD6B55", 
      confirmButtonText : "Yes, delete it!", 
      cancelButtonText : "No, Cancel delete!", 
      closeOnConfirm : false, 
      closeOnCancel  : false 
     }, 
     function(isConfirm){ 
      if(isConfirm){ 
       swal("Deleted!","your album has been deleted", "success"); 
       setTimeout(function() { 
        self.parents(".delete_form").submit(); 
       }, 2000); //2 second delay (2000 milliseconds = 2 seconds) 
      } 
      else{ 
        swal("cancelled","Your album is safe", "error"); 
      } 
     }); 
    }); 
</script> 

Это проверялось, но это должно помочь вам начать работу. Позвольте мне знать, если это помогает.