2012-07-04 52 views
1

我使用JQuery在我的rails應用程序中實現分頁,並且遇到了一個問題,即當我在瀏覽器中回彈時,rails無法呈現頁面內容,而是轉儲原始的Javascript到我的瀏覽器窗口中。下面就讓我們來看看,我使用的是什麼:在導致渲染失敗的Rails中的JQuery分頁

pagination.js:

if (history && history.pushState) { 
    $(function() { 
    $('.pagination a').live("click", function() { 
     $.ajax({url: this.href, dataType: "script", cache: true}); 
     history.pushState(null, document.title, this.href); 
     $("html, body").animate({ scrollTop: 0 }, 300); 
     return false; 
    }); 

    $(window).bind("popstate", function() { 
     $.ajax({url: location.href, dataType: "script", cache: true}); 
    }); 
    }); 
} 

在我看來,index.js.erb的:

$("#products").html("<%= escape_javascript(render("products")) %>"); 

它工作在某些時候,但通常當點擊後退按鈕時,JS將被轉儲到我的瀏覽器窗口中而不被評估/呈現。它看起來像這樣(在我的瀏覽器中):

$("#products").html("<table class=\"table table-striped\">\n<thead>\n<tr>\n<th>Products 

...等等。我不確定究竟是什麼失敗。有任何想法嗎?

+0

爲我們提供了關於此渲染功能的更多輸入以及您的瀏覽器向您展示的內容。 – worenga

+0

我的瀏覽器的內容看起來像上面的代碼塊,Javascript和HTML顯示在我的瀏覽器中,而不是被評估。 escape_javascript和render是rails框架的一部分。 – Josh

+0

爲什麼不使用jquery-pjax,順便說一句? – Roman

回答

0

通過瀏覽器請求的路徑看起來像

  • /產品
  • /產品?頁= 1
  • /產品?頁= 2

根據是否/產品? page = 2被瀏覽爲「手動」或通過ajax呈現js版本或普通版本。當你點擊後退按鈕時,你可能會得到瀏覽器緩存中的內容,這可能是這兩個版本中的任何一個,具體取決於您之前的導航歷史記錄。

爲了使其正常工作,您希望瀏覽器維護兩個獨立版本的緩存。這樣做的一種方式是通過增加一個額外的參數,當你讓你的Ajax請求:

$('.pagination a').live("click", function() { 
    $.ajax({url: this.href, dataType: "script", cache: true, data: {'ajax_paginate': true}); 
    ... 
}); 

jQuery的pjax已經這樣做了,如果你使用pjax-Rails插件魔術緩存分離參數將被剝奪爲你自動。

在試用此功能之前,您需要先清空瀏覽器緩存 - 您可能已經在緩存中看到一堆壞的數據。

+0

我還沒有嘗試過jquery-pjax,但我會。不過你的建議是添加ajax_paginate。謝謝。 – Josh