javascript - sweetalert 用于 Laravel 应用程序中的删除警报

Question

我正在尝试使用 sweetalert 发出删除警报，但每当我从 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

问题是你在一个循环中生成所有这些。每个删除按钮都有一个 ID 为“#delete”，每个表单都有一个 ID 为“#delete_form”，但是有很多按钮和表单，每个按钮和表单都有相同的 ID。

您没有确定选择器的范围以了解实际提交哪个表单。将您的 ID 切换到类，并确保根据单击的按钮选择表单。

例如，您的代码可以更改为如下所示:

@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>

这尚未经过测试，但它应该可以帮助您入门。让我知道这是否有帮助。