546   jQuery JS Laravel

上一遍文章介绍了laravel5添加pjax局部刷新页面的方法,但只局限于标签a的get方法。
表单form通过post方法提交,也绑定到pjax局部刷新。
在github上很容易找到方法,地址:jquery-pjax

$(document).on('submit', 'form[data-pjax]', function(event) {
  $.pjax.submit(event, '#pjax-container')
})

按照本地代码稍作修改,根据表单id定位form,pjax获取的内容加载到body中:

$(document).on('submit', '#form', function(event) {
  $.pjax.submit(event, 'body')
})

测试过程中发现,表单提交请求发起了两次!
刚开始以为是表单自动提交造成的,加个onsubmit=”return false”,没啥效果。
睡个午觉后,突发奇想,会不会是重复加载js,绑定了两次submit造成的了?
于是乎,把pjax的容器从body改成#pjax-container,同时把所有JS放在该容器之后,如下所示:

JS 代码:

$(document).on('submit', '#form', function(event) {
  $.pjax.submit(event, '#pjax-container')
})

html 代码

<body class="custom-background">
<div id = "pjax-container">
@include('layouts.navbar')

<div class="container">
@yield('content')
</div>
</div>

<!-- script references -->
<script src="{{ asset('/js/jquery.min.js') }}"></script>
<script src="{{ asset('/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('/js/jquery.pjax.js') }}"></script>
<script src="{{ asset('/js/nprogress.js') }}"></script>

<script src="{{ asset('/js/autoload.js') }}"></script>
</body>

 

重新测试,可以啦,没有再出现提交两次表单的情况了。




Leave a Reply

Your email address will not be published. Required fields are marked *