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容器會發生變化。

我已經做到了。但導航欄並沒有改變。

Answer 1

Pjax沒有多個容器。

要將相同的響應複製到其他pjax容器，可以使用像這樣的pjax complete event handler。從頁面

刪除/禁用現有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');