PJAX多个容器

PJAX Multiple Containers

本文关键字：PJAX      更新时间：2023-09-26

如何创建一个可以有多个容器的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容器会发生更改。

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

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() );
});

您可以添加两个href相同但id不同的链接。并将pjax连接到它们中的每一个：

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

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