有沒有什麼辦法從我的javascript文件內以編程方式調用和執行pjax？

Question

我有一個函數，等待用戶點擊輸入文本類型的輸入，然後等待用戶按向下和向上箭頭鍵。當用戶按下向上和向上箭頭鍵時，函數hoverDown（）被調用，它本質上以編程方式懸停在表格行上。當按下enter時，調用window.location並加載相應的頁面。問題是我在整個應用程序中都使用pjax來動態加載內容並在不刷新頁面的情況下推送新的url。當我調用window.location函數時，pjax不再起作用，相反，加載了正確的url併發生了整頁刷新 - 我試圖避免的事情。有沒有什麼辦法可以在我的函數內以編程方式調用和執行pjax？培訓相關代碼：

// HTML

<div id="main"> 
<input type="text" class="table-search" id="search" autocomplete="off" placeholder="Search Clients..." /><table class="table" id="tblData"> 
<thead><tr><th>Name</th> <th>Title</th></tr></thead> 
<tbody id="tblDataBody"> 
<tr><td><a href="http://lar.loc/cases">Scott</a></td> <td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Billy</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">George</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Sara</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">John</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Megan</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Ben</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Jully</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Bethany</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Alen</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Jane</a></td><td>Client</td></tr> 
<tr><td><a href="http://lar.loc/cases">Alice</a></td><td>Client</td></tr></tbody></table> 
</div> 

//使用Javascript

$(document).ready(function(){ 
    $("#main").on("keydown", "#search", hoverDown); 
}); 

function hoverDown(e) { 
    var $tbl = $('#tblDataBody'); 
    var $cur = $('.active', $tbl).removeClass('active').first(); 

    if (e.keyCode === 40) { //down 
     if ($cur.length) { 
      $cur.next().addClass('active'); 
     } else { 
      $tbl.children().first().addClass('active'); 
     } 
    } else if (e.keyCode == 38) { //up 
     if ($cur.length) { 
      $cur.prev().addClass('active'); 
     } else { 
      $tbl.children().last().addClass('active'); 
     } 
    } else if (e.keyCode == 13) { 
     if ($cur.length) { 
      window.location = $cur.find("a").attr("href"); 
     } 
    } 
} 

//爲了完整起見，CSS：

.active { 
    background-color: yellow; 
} 

如果你想看到這爲了更好的理解代碼，你可以查看this jsFiddle.

再次，我試圖使用pjax加載內容。

Answer 1

我不知道我怎麼錯過了這個文件先在時間周圍，但我發現了一種手動調用pjax的簡單方法。

} else if (e.keyCode == 13) { 
     if ($cur.length) { 
      // manually invoke pjax after enter has been pressed 
      var $url = $cur.find("a").attr("href"); 
      $.pjax({url: $url, container: '#main'}); 
     } 
} 

Answer 2

讀了你鏈接的doucmentation後，我相信你應該使用$.pjax.click功能，而不是到window.location分配您的網址：

var container = $(this).closest('[data-pjax-container]') 
$.pjax.click(event, {container: container}) 

Answer 3

看一看延用：動態Pjax

https://github.com/beezee/djax