关于pjax的一些坑

静态页面中应用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 Pjaxdiv>

                <div class="panel-body">
                    <a data-pjax href="/pjax">origina>

                    <a data-pjax href="/pjax1">pjax1a>

                    <a data-pjax href="/pjax2">pjax2a>
                div>

                <div class="panel-heading">Pjax Pagediv>

                @yield('pjaxCenter')
            div>
        div>
    div>
div>
@endsection

测试代码：
pjax.blade.php

@extends('layouts.pjax')

@section('pjaxCenter')
class="panel-body">
    I'm origin page

@endsection

pjax1.blade.php

@extends('layouts.pjax')

@section('pjaxCenter')
class="panel-body">
    I'm pjax1 page

@endsection

pjax2.blade.php

@extends('layouts.pjax')

@section('pjaxCenter')
class="panel-body">
    I'm pjax2 page

@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')
        
        <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标签内，重新试一下是否有用吧。