我目前正在我的网站上创建分步注册过程。
整个过程已成功创建,设置与此处投射的轨道完全相同: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!
无论如何,由于整个事情已经被 Ajaxified,我一直试图让浏览器后退按钮转到我的上一步以及有一个页面后退按钮。
我通过将它添加到我的 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 动画触发。想了想,它只是fadeIn,fadeOut到同一步骤。我发现发生这种情况的原因是因为所有步骤代码都在创建操作(发布)中,而不是后退按钮触发的新操作(获取)。尽管即使我将代码放在那里,浏览器中的后退按钮也不会抛出 :back_button 参数。
我一直在做很多关于让后退按钮与 Ajax 一起工作的研究,但我发现的所有情况都并不适用!这部分是因为我的整个设置更改了我猜的控制器代码中的 current_step。即使我确实将控制器代码放入新操作中,也不会加载上一步,因为没有 :back_button 参数。
我想我的第一个问题是: 有没有办法只在按下浏览器的后退按钮时添加 :back_button 参数?
那将是理想的,因为这样我当前的所有代码都可以正常工作。我知道可以通过以某种方式绑定到 ajax 发送回调来添加该参数,但我只希望它在按下浏览器后退按钮时发生。我想也许我可以以某种方式绑定到 history.back ,但这似乎不可能。
我的主要问题: 如何解决此问题以使浏览器返回正确的步骤?
我可以以某种方式读取锚参数来设置当前步骤吗?
我是否必须更改用于执行每个步骤的整个方法?
也许我只是失败并做错了什么?
我觉得我很接近!
提前感谢各位程序员,任何指引我正确方向的指南,或者任何更漂亮的替代方法也会有所帮助。另外,我不想使用任何预制插件来实现这一点。
如果您需要更多信息,请告诉我。
谢谢!
编辑:
我提出这个问题可能包括体面的预制插件/宝石/库,这些插件/宝石/库有强大的支持,并且得到足够的支持以进入生产环境。