PJAX多个容器

Question

如何创建一个可以有多个容器的Pjax？我在这个链接上尝试了这个Pjax：

https://github.com/defunkt/jquery-pjax/blob/master/README.md

这是我的代码：

$(document).pjax('a', '#pjax-container, #pjax-navbar');

但它不起作用。

然后我尝试了下面的代码：

$(document).pjax('a', '#pjax-container');
$(document).pjax('a', '#pjax-navbar');

而且它也不起作用。它只加载最后一个。

我该如何让它工作呢？

这是我的HTML

<div class="wrap">
    <nav id="w0" class="navbar-inverse navbar-fixed-top navbar" role="navigation" id="pjax-navbar">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse"><span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span></button><a class="navbar-brand" href="/josh/cms_template/backend/web/">My Company</a></div>
            <div id="w0-collapse" class="collapse navbar-collapse">
                <ul id="w1" class="navbar-nav navbar-right nav">
                    <li class="active"><a href="/josh/cms_template/backend/web/site/index">Home</a></li>
                    <li><a href="/josh/cms_template/backend/web/site/logout" data-method="post">Logout</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container" id="pjax-container">
        <div class="site-index">
            this is my content
        </div>
    </div>
</div>

我想要的是当我转到另一个页面时，只有pjax-container会改变。

我已经做好了。但是导航栏并没有改变。

Answer 1

Pjax没有多个容器。

要将相同的响应复制到其他pjax容器，您可以使用pjax complete事件处理程序，如下所示。

从页面中删除/禁用现有的pjax代码：

//Remove Code

//$(document).pjax('a', '#pjax-container');
//$(document).pjax('a', '#pjax-navbar')
//$(document).pjax('a', '#pjax-container, #pjax-navbar');


// Add this Code

$(document).on('pjax:complete', function(event) {
   //This code will copy #pjax-container container's response 
   // to #pjax-navbar when event is completed.

   $('#pjax-navbar').html(  $('#pjax-container').html() );

});

Answer 2

你可以添加两个href相同但id不同的链接。并将pjax附加到其中的每一个：

$(document).pjax('a#pjax-link-container', '#pjax-container');
$(document).pjax('a#pjax-link-navbar', '#pjax-navbar');

Answer 3

$(document).pjax('a', '#pjax-container');
$(document).on('pjax:clicked', function(options) { 
                $.pjax.reload('#pjax-container', {               
                 fragment: '#pjax-container',
                 timeout: 5000,
                 scrollTo: false
              })
            });