帶Javascript的Rails多步表單 - 瀏覽器後退按鈕行爲

我有1個表單，我已將它們分成多個div，每個div都有自己的Next按鈕。帶Javascript的Rails多步表單 - 瀏覽器後退按鈕行爲

在點擊「下一步」一些javascript火災（見下文）隱藏當前的div和取消隱藏的下一個DIV（形式即下一個步驟）。的URL也被更新用＃和步驟的名字（例如example.com/booking變成example.com/booking#contact-info）

$('#booking-details-complete').click(function(event) { 
    $("#booking-details").css("display", "none"); 
    $("#contact-info").css("display", "block"); 
    });

將觸發這個JS下一步按鈕的代碼是：

<%= link_to "Next", '#contact-info', :id => "booking-details-complete"%>

最後一塊的表單有一個Submit按鈕，而不是Next按鈕，它向一個模型發送一個大的POST請求。

我的問題是後退按鈕行爲：回去不更新頁面。 URL的更改是正確的，但表單的各個部分（即div）不更新其顯示/隱藏狀態。

我很接近完成這個項目，但就是無法弄清楚這最後一塊。任何幫助非常感謝。

來源

2014-01-17 Trevor McKendrick

可以PLZ發表您的後退按鈕邏輯以及 –

我的意思是瀏覽器的後退按鈕。我沒有專門用於表格的後退按鈕。 –

好的，那麼問題在於，當鏈接回時，您會將其路由回頁面的初始狀態。你如何堅持國家？ –

所以你的意思是：點擊瀏覽器「返回」更新網址您哈希正常，但網頁仍然是靜態的，其中所期望的行爲是，你是在坍塌的部分，前一個重新打開？

你需要一個散列聽衆，有沒有得到一個我不相信一個特別標準的方式。推送和流行歷史只是操縱歷史堆棧，它不會給你你想要的。

一旦你有一個哈希聽衆，你必須寫一個JS功能，可以基於URL的哈希設置你的頁面的狀態。

我從來沒有實現所以這裏的哈希聽衆的東西，我發現可能有助於http://benalman.com/projects/jquery-hashchange-plugin/

來源

2014-01-17 20:17:21 drillprp

「所以你的意思是在你的瀏覽器上點擊」返回「來正確地更新你的哈希值，但你的頁面仍然是靜態的」。 100％正確。理想的行爲是表單的該部分的div將取消隱藏，並且先前顯示的div將隱藏自己。我會看哈希聽衆，直到現在還沒有聽說過。 –

它應該被標記，這個插件不適用於高於1.9的jQuery版本。 –

據我所知，大多數時候人們需要哈希監聽功能，他們已經在使用前端的JS框架了，比如Marionette，Angular等等。這些通常都帶有一個「路由器」，它根據URL哈希。它也不會傷害你將頁面狀態更新功能放入頁面加載中。 – drillprp

帶Javascript的Rails多步表單 - 瀏覽器後退按鈕行爲

回答

相關問題