Question

我目前正在我的网站上创建一步一步的注册流程。

使用完全相同的设置成功创建整个过程在轨道上看到：http://railscasts.com/episodes/217-multistep-forms

在我完成所有工作之后，我将整个事情转换为Ajax！使用每个步骤上的提交按钮或表单，我只需添加：

remote:true

然后，在添加适当的响应处理之后：

respond_to do|format|
  format.js { render 'new' }
  format.html { render 'new' }
end

在new.js.erb中我有这个：

$('#steps_content').fadeOut('fast', function(){
  $('#steps_content').html("<%= j render "#{@subscription.current_step}_step" %>", 
     $('#steps_content').fadeIn('fast', function(){})
  )
});

这是new.html.erb：

<div id='steps_content' >
   <%= render "#{@subscription.current_step}_step" %>
</div>

一步步Ajaxified！

无论如何，由于整个事情已被Ajax化，我一直在努力 浏览器后退按钮也可以转到上一步有一个页面后退按钮。

我将其添加到new.js.erb的开头：

history.pushState(
   null, 
   '', 
   '#step=<%= j "#{@subscription.current_step}" %>'
);

这就结束了：

if (!$(window) || !$(window).data('events') || 
    !$(window).data('events')['popstate']) {

      $(window).bind('popstate', function() {
        $.getScript(location.href);
      });

}

这给我带来了相当大的麻烦！

使用当前设置：JQuery Animation触发。想到，它只是淡出，淡出到同一步。我发现发生这种情况的原因是因为所有步骤代码都在创建动作（post）中，而不是后退按钮触发的新动作（get）。虽然我把代码放在那里，但浏览器中的后退按钮不会抛出：back_button参数。

我一直在做一些关于让Back Button工作的研究使用Ajax，但我发现的所有情况都不适用！这是部分原因因为我的整个设置改变了控制器代码中的current_step。即使我将控制器代码放入新操作中，也不会加载上一步，因为没有：back_button参数。

我想我的第一个问题是： 有没有办法只在添加：back_button参数时按下浏览器的后退按钮？

这将是理想的，因为那时我所有的当前代码都可以正常工作。我知道可以通过以某种方式绑定到ajax发送回调来添加该参数，但我只希望在按下浏览器后退按钮时发生这种情况。我想也许我可以以某种方式绑定到history.back，但这似乎不可能。

我的主要问题： 如何解决此问题以使浏览器返回正确的步骤？

我可以以某种方式读取锚参数来设置当前步骤吗？

我是否必须更改我用于执行每个步骤的整个方法？

也许我只是失败并做错了什么？

我觉得我太近了！

提前感谢你的编码员，任何指导我的人正确的方向，或任何更漂亮的替代方法也将是很有帮助。此外，我不想使用任何预制插件来完成此任务。

如果您需要更多信息，请告诉我。

谢谢！

修改

我打开这个问题，可能还包括体面的预制插件/宝石/库，它们具有强大的支持并且足以支持进入生产环境。

Answer 1

我使用一个名为jQuery BBQ的jQuery插件，取得了很好的成功

基本上它允许您在用户离开当前页面时推送数据数组（通常记录您的ajax状态）。如果用户单击后退按钮，它将弹出状态数组并允许您编写事件处理程序以基于数组恢复您的ajax状态

无论哪种方式，它值得一看，因为自从我一年前开始使用它以来从未给我任何支持问题.. http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html

它还在现代浏览器（包括safari）上进行了测试。不可否认，我不知道它引入了哪些变化来解决Safari缺乏hashchange事件支持的问题，但无论如何它都能正常工作。

Answer 2

您可以使用jquery

观看名为'hashchange'的事件

$(window).bind('hashchange',function(){ 
/*
    do stuff where you want when the back button is hit here
*/
});

无论你想要放什么逻辑都应该有效。当你按下后退按钮。您应该能够跟踪该呼叫中的变化或其他任何内容。

我在创建一个完全动态的页面并使用anchor标签在页面之间导航时使用了这个技巧。它适用于前进和后退。在您的情况下，您可能希望确保在重新提交时不允许使用前进按钮或您拥有的任何验证逻辑。

Answer 3

您可以使用插件Jquery地址执行此操作： {{3P>

Rails一步一步表单 - 几乎转换为Ajax - 除了浏览器后退按钮

3 个答案: