静态页面中应用pjax看不到效果
由于我是在laravel中应用的pjax,所以在layouts中的app.blade.php中引用了pjax和nprogress的相关js和css。
建立公共代码pjax.blade.php
@extends('layouts.app')
@section('content')
<div class="container" id="pjax-container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Test Pjax</div>
<div class="panel-body">
<a data-pjax href="/pjax">origin</a><br>
<a data-pjax href="/pjax1">pjax1</a><br>
<a data-pjax href="/pjax2">pjax2</a>
</div>
<div class="panel-heading">Pjax Page</div>
@yield('pjaxCenter')
</div>
</div>
</div>
</div>
@endsection
测试代码:
pjax.blade.php
@extends('layouts.pjax')
@section('pjaxCenter')
<div class="panel-body">
I'm origin page
</div>
@endsection
pjax1.blade.php
@extends('layouts.pjax')
@section('pjaxCenter')
<div class="panel-body">
I'm pjax1 page
</div>
@endsection
pjax2.blade.php
@extends('layouts.pjax')
@section('pjaxCenter')
<div class="panel-body">
I'm pjax2 page
</div>
@endsection
建立pjax文件:
pjax.js
$(function () {
if ($.support.pjax) {
$('#pjax-container').pjax('a[data-pjax]', '#pjax-container', {fragment: ('#pjax-container'), timeout: 8000});
$(document).on('pjax:start', function () {
NProgress.start();
});
$(document).on('pjax:end', function () {
NProgress.done();
});
}
});
因为我这里没有动态的从php中分配数据,所以这里如果我不加fragment参数的话,是不会启用pjax的。pjax-container代表使用pjax局部刷新的范围。如果你的pjax不生效的话可以试图加上这个参数试一下哦。
通过pjax跳转后,在跳转后的页面有些js不生效
有时候通过pjax跳转之后的页面会发现有些js都不生效了。
例如:
我在一个列表页中点击一个文章,通过pjax跳转到这篇文章的详情页。但这个详情页中引用了其他的js插件,比如我引用的PDFObject插件,还有uploader插件,这时候会发现,当我跳转到这个页面的时候,这两个插件都不生效了,但当我在这个页面重新刷新时又生效了,在这里看到了一个根本解决办法。也发现了另一个比较方便的解决办法。、
解决方案:将你的js放在pjax的container div标签内。
pjax.js
$(function () {
if ($.support.pjax) {
$('#wrapper').pjax('a[data-pjax]', '#page-wrapper', {fragment: ('#page-wrapper'), timeout: 8000});
$(document).on('pjax:start', function () {
NProgress.start();
});
$(document).on('pjax:end', function () {
NProgress.done();
});
}
});
app.blade.php
<div id="page-wrapper">
@yield('content')
<!-- JavaScripts -->
<script src="{{ elixir('js/public.js') }}"></script>
<script src="{{ elixir('js/app.js') }}"></script>
<script src="{{ elixir('js/admin.js') }}"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</div>
所以,我只将这些js放进了page-wrapper标签内,重新试一下是否有用吧。