Question

不知道有人可以帮我这个。我是JS和JQuery的新手。

我希望避免在我的博客中删除帖子时发生意外，所以我想拥有它以便当我点击删除时会弹出一个模式以确认我确实要删除帖子然后再删除。< / p>

我添加了以下代码。

 <!-- Button trigger modal to delete post -->
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#deletePost">
  Delete
</button>

<!-- Modal -->
<div class="modal fade" id="deletePost" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Delete Blog Post</h4>
      </div>
      <div class="modal-body">
        <p>You are about to delete a blog post, are you sure all that effort is to be sent to the unrecoverable trash can?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">OMG, NO!!!</button>
        <form action="/blog/{{ $post->id }}" method="POST">
            {{ csrf_field() }}
            {{ method_field('DELETE') }}
            <button type="submit" class="pull-right btn btn-danger">Delete it!</button>
        </form>
      </div>
    </div>
  </div>
</div>

现在一切正常，我现在要做的就是当我点击＆＃34;删除它时！＆＃34;按钮就可以做到这一点。

这一切都与删除正确的帖子有关，我想传递

{{ $post->id }}

到模态，以便它将post id发送到控制器。

我的问题是我如何将上面的id传递给模态？我已经阅读了很多例子，它们都是如此不同，所以我认为最好能得到一些观点。

谢谢！

Answer 1

我非常推荐使用SweetAlert插件，它与Twitter Bootstrap在视觉上兼容，使用起来更加愉快。这是多语言，模型独立删除功能的一段代码：

    $('body').on('click', 'sweet-delete', function (e) {
        e.preventDefault();
        var id = $(this).data('id');
        var model = $(this).data('model');
        swal({
            title: lang.confirm_please,
            text: lang.delete_warning,
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: lang.delete_button,
            closeOnConfirm: false,
            showLoaderOnConfirm: true,

        }, function(){
            $.post('/'+model+'/'+id, {_method: 'DELETE'}, function(data){
                swal({
                    title: lang.delete_title,
                    text: lang.delete_success,
                    type: "success",
                    timer: 5000
                }, function(){
                    window.location.href = '/'+model;
                });
            });
        });
    })

在你看来：

<button data-id="{{$post->id}}" data-model="blog" class="pull-right btn btn-danger sweet-delete">@lang('app.delete')</button>

我必须提到，为了将CSRF令牌附加到我的ajax表单，我使用：

$.ajaxSetup({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
    });

在我的app.js和

中

<meta name="csrf-token" content="{{csrf_token()}}">

在我的主布局文件中。

Answer 2

要将post ID传递给模态表单，应使用jQuery将其插入模式中。

按钮：

<button type="button" class="btn btn-default btn-xs delete-post" data-post-id="{{ $post->id }}">Delete</button>

注意：我们将使用以下内容触发模态，因此我们也可以插入ID。

jQuery的：

$(document).ready(function() {
  var modalObj = $('#deletePost');

  $('.delete-post').click(function(e) {
    var postId = $(this).data('post-id');

    modalObj.find('form').attr('action', '/blog/' + postId);
    modalObj.modal('show');
  });
});

在这种情况下，action属性是根据相关的帖子ID动态设置的。

将数据传递给Laravel的bootstrap模式

2 个答案: