如何在Laravel中使用模态引导程序发出警报消息?

时间:2016-12-18 17:27:42

标签: javascript jquery twitter-bootstrap laravel laravel-5.2

当我点击模态按钮是这样的。

<button class="btn btn-danger" name="button" title="Hapus" method="get" data-toggle="modal" data-target="#deleteModal{{$objek->id}}" onclick="javascript: {{url('/admin/objek/'.$objek->id)}}"><i class="fa fa-trash-o fa-lg"></i>
</button>

和我的模态一样。

<div class="modal fade" id="deleteModal{{$objek->id}}" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
  <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="exampleModalLabel">Hapus Objek Wisata</h4>
      </div>
      <div class="modal-body">
        <p>
         Hapus data objek wisata dengan nama {{$objek->nama_objek}}?
        </p>
      </div>
      <div class="modal-footer">
        <form class="" action="{{url('/admin/objek', $objek->id)}}" method="post">
          <input type="button" class="btn btn-default" data-dismiss="modal" value="Tidak">
          <input type="hidden" name="_method" value="delete">
          <input type="hidden" name="_token" value="{{ csrf_token() }}">
          <input type="submit" class="btn btn-danger" name="name" value="Hapus">
        </form>
      </div>
    </div>
  </div>
</div>

问题是如何在页面重新加载后显示带有警报消息的模态引导程序?

这样的警告消息,但是我想在模态引导程序中使用,就像我单击模态删除按钮一样。

<script type="text/javascript">alert("Data has been submitted");</script>

感谢您的关注。

1 个答案:

答案 0 :(得分:0)

您可以使用session data在页面重新加载时打开模态。

提交请求后,只需在会话中添加一些变量,如下所示:

return redirect('route')->with('show_modal', true);

view.blade.php

<scirpt>
    $(function(){
        var show_modal = "{{ session()->pull('show_modal') }}";

        if(typeof show_modal !== 'undefined' && show_modal) {
            $('#modalId').modal('show');
            // This will open up the modal if the variable is present in session as true
            // OR you can simply show an alert message!
            alert("Data has been submitted");
        }
    });
</script>

希望这有帮助!