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完整事件处理程序。

从您的网页中删除/停用现有的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
              })
            });

PJAX多个容器

3 个答案: