Question

我有1个表单，我已经分成多个div，每个div都有自己的Next按钮。

点击“下一步”后，一些javascript会触发（见下文）隐藏当前div并取消隐藏下一个div（即表单中的下一步）。该网址也会更新为＃和步骤的名称（例如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的Next按钮代码是：

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

表单的最后一部分有一个Submit按钮而不是Next按钮，它向各种模型发送一个大的POST请求。

我的问题是后退按钮行为：返回不会更新页面。 URL正确更改，但表单的各个部分（即div）不会更新其显示/隐藏状态。

我已经接近完成这个项目了，但是无法弄清楚这最后一块。任何帮助非常感谢。

Answer 1

所以你的意思是在你的浏览器上点击“返回”正确地更新URL中的哈希值，但你的页面保持静态，所需的行为是你正在崩溃的部分和之前的部分重新打开？

你需要一个哈希监听器，没有一种特别标准的方法来获得一个我不相信的方法。推送和流行历史只是操纵历史堆栈，它不会给你你想要的东西。

一旦你有一个哈希监听器，你必须编写一个JS函数，它可以根据URL的哈希值设置你的页面状态。

我从来没有实现过哈希监听器，所以我发现这可能会有所帮助http://benalman.com/projects/jquery-hashchange-plugin/

Rails多步骤表单与Javascript - 浏览器后退按钮行为

1 个答案: