laravel5 pjax form

2015/10/17 1,789 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>

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

laravel5 pjax form

One Response

Leave a Reply Cancel

Categories