Rails – 渲染:目标锚标记的动作?

我想像这样使用渲染:

render :action => 'page#form' 

我也试过这个:

 render :template => 'site/page#form' 

那也行不通。 此特定页面上的表单位于最底层,如果在提交时出现任何错误,我讨厌将用户默认为页面顶部。 我还需要使用render(而不是重定向),因为我需要保留对象及其错误。

如何渲染以定位特定锚标记?

相信我找到了解决方案。 对于其他有此问题的人,请将表单指向:

 <%= form_tag '/page#form' do %> 

似乎已经解决了这个问题。

关于bobthabuilda答案的快速总结,对于像我这样不那么聪明的人,他们最近搜索到了这个问题并且似乎无法获得技巧。

首先,从Rails中抽象出来,每个基本的HTML

都有一个选项可以将锚点添加到目标页面,为此你可以将锚点放在'action'属性中,如下所示:

 
...

这样,提交后,您的浏览器将使用/contact#form请求,这将使您直接进入指定的锚点。

我们现在需要做的就是make rails以正确的方式生成我们的表单标记,如上例所示。 这将要求我们以两种可能的方式修改我们的观点。

  1. 如果您在视图中使用form_tag ,请按照bobthabuilda建议的方式使用它:

     <%= form_tag '/contact#form' do %> 

    就这么简单,你只需告诉rails将我们表单的动作设置为/contact#form

  2. 如果你使用form_for ,则有一个:anchor参数,它进入指定的:url如下所示:

     <%= form_for @message, :url => contact_path(@message, :anchor => 'form') do |form| %> 

    或者像这样(如果你依赖:action ):

     <%= form_for(@message, :url => { :action => "create" , :anchor => "form" }) do |form| %> 

    这样rails将为HTML表单创建正确的操作,并在之后添加我们的锚点。

使用JavaScript将视图移动到正确的位置。 除此之外我无法知道。

  

未经测试,但我认为这应该有效。

使用redirect_to以便浏览器获得前进以滚动到锚点:

redirect_to:action =>’page’,:anchor =>’form’

您可以使用不显眼的jQuery和数据属性。

例如,在我的应用程序中,我有一个大表单,其中包括一个“地址”字段集,用户应该在其中:

  • 写下他的地址然后
  • 点击“检查”按钮显示一个小谷歌地图,看看他输入的地址是否正确。

在他的“检查”按钮之后,我想再次渲染表单,但是使用此地址字段集的ancor,显示地图。

这是我的.erb模板:

 
Write you address here, then check it
<%= f.text_field :address %>

当按下检查按钮时,它将设置params[:preview] 。 在我的控制器中, create动作如下所示:

 def创建   
   @obj = current_user.objs.new(params [:obj]) 
  如果参数[:预览] 
     #地理编码代码,然后:
    渲染动作:“编辑” 
  其他
     #...
  结束
结束                           

因此,动作编辑将使用仍然定义的params[:preview]进行渲染,这会将#address fieldset data-preview设置为true。 即,将呈现此HTML行:

现在我需要做的就是通过javascript获取该信息,如果data-previewtrue#address窗口位置移动到#address锚点。 这是我不引人注意的jQuery代码:

 $(function(){
   var preview = $(“#address”)。data('preview');
   if(preview == true){
     window.location = window.location.href +“#address”;
   }; 
 }); 

就是这样!

我建议使用jQuerysvalidation插件。 您甚至可以使用jquery validate插件实现自己的表单助手,具体取决于您需要validation的对象属性。

当然这是更多的工作,但我相信它会在未来得到回报。

除此之外 – 在收到响应后使用ajaxified提交和处理错误消息。