2

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

整个过程已成功创建,设置与此处投射的轨道完全相同: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 ,但这似乎不可能。

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

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

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

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

我觉得我很接近!

提前感谢各位程序员,任何指引我正确方向的指南,或者任何更漂亮的替代方法也会有所帮助。另外,我不想使用任何预制插件来实现这一点。

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

谢谢!

编辑:

我提出这个问题可能包括体面的预制插件/宝石/库,这些插件/宝石/库有强大的支持,并且得到足够的支持以进入生产环境。

4

3 回答 3

2

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

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

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

它还在现代浏览器(包括 safari)上进行了测试。诚然,我不知道它引入了哪些更改来解决 Safari 缺乏 hashchange 事件支持的问题,但无论如何它都可以正常工作。

于 2012-07-11T01:06:52.237 回答
1

您可以使用 jquery 观看名为“hashchange”的事件

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

无论您想放在那里的任何逻辑都应该有效。当您按下后退按钮时。您应该能够跟踪该呼叫或其他任何内容中的更改。

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

于 2012-07-10T21:05:49.703 回答
0

您可以使用插件 Jquery Adress 做到这一点: http ://www.asual.com/jquery/address/

于 2012-07-17T15:24:28.250 回答