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

Я пытаюсь создать предупреждение об удалении, используя sweetalert, но всякий раз, когда я подтверждаю delete из сладкого предупреждения, первая строка таблицы всегда удаляется. Даже если я попытаюсь удалить, например, 3-ю строку из таблицы, 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>

person Noob Coder    schedule 08.03.2016    source источник
comment
$("#delete_form").submit(); удаляет элемент формы, а не sweetalert. Эта функция формы, скорее всего, является виновником, и вы не предоставили функциональный HTML или JS для этой формы.   -  person Matthew Darnell    schedule 08.03.2016
comment
На самом деле проблема в том, что вы генерируете все это в цикле. Каждая кнопка удаления имеет идентификатор #delete, а каждая форма имеет идентификатор #delete_form, но есть много кнопок и форм с одинаковым идентификатором. Вы не ограничиваете свой селектор, чтобы знать, какую форму на самом деле отправлять. Переключите свои идентификаторы на классы и обязательно выберите форму в зависимости от того, какая кнопка была нажата.   -  person maiorano84    schedule 09.03.2016


Ответы (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>

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

person maiorano84    schedule 08.03.2016