【问题标题】:Rails - render :action to target anchor tag?Rails - 渲染:动作到目标锚标签?
【发布时间】:2010-01-15 01:34:53
【问题描述】:

我希望像这样使用渲染:

render :action => 'page#form'

我也试过这个:

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

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

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

【问题讨论】:

    标签: ruby-on-rails ruby


    【解决方案1】:

    相信我找到了解决办法。对于遇到此问题的其他人,请像这样指向表格:

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

    似乎已经解决了问题。

    【讨论】:

    • 非常感谢!你是怎么找到的?
    • 请注意,不需要向控制器添加任何特殊内容(使用render 时,例如在处理表单验证错误时)。使用“/page#my_anchor”作为“action”表单属性的值意味着表单将发布到“/page#my_anchor”。而且由于render 不会更改响应中的url(就像redirect 会做的那样),浏览器将(很自然地)尊重锚点,即向下滚动到锚点(在这种情况下为'my_anchor')。
    • 我发现这样做有问题。我有一个带有搜索表单的索引页面。当我第一次单击提交时,它按预期提交并跳转到锚点。但是,再次尝试提交并不会提交它只是跳转到锚点的表单。
    • 当然,您可以使用任何 Rails 表单助手,包括更复杂的内容,例如:= simple_form_for @user.devise_user, url: profile_path(anchor: 'delete_my_account'), method: :删除做 |f| ```
    【解决方案2】:

    关于 bobthabuilda 的答案的快速总结,适合像我这样最近用谷歌搜索该问题但似乎无法解决问题的不那么聪明的人。

    首先,从 Rails 中抽象出来,每个基本的 HTML &lt;form&gt; 都有一个向目标页面添加锚点的选项,为此,您基本上将锚点留在 'action' 属性中,如下所示:

    <form action="/contact#form" method="post">
      ...
    </form>
    

    这样,在提交时,您的浏览器将使用/contact#form 请求,这会将您直接带到指定的锚点。

    我们现在需要做的只是让rails以正确的方式生成我们的表单标签,如上例所示。这将要求我们以两种可能的方式修改我们的视图。

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

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

      就这么简单,你只需告诉rails 将我们表单的action 设置为/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 表单创建正确的操作,然后在其末尾添加我们的锚点。

    【讨论】:

      【解决方案3】:

      使用 JavaScript 将视图移动到正确的位置。我不知道该怎么做。

      <script>
        window.location = window.location.href + "#form";
      </script>
      

      未经测试,但我认为这应该可行。

      【讨论】:

        【解决方案4】:

        使用 redirect_to 让浏览器提示滚动到锚点:

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

        【讨论】:

        • 再读一遍...我不能使用重定向。我需要变量来持久化。
        • 有一个先前的问题,其中包括一个克隆的实现,以通过重定向保留对象(包括错误):stackoverflow.com/questions/1536428/…
        • 这是一个很好的 anchor_tag 重定向,但没有显示错误验证。对我有用的是将:url =&gt; { :action =&gt; "create" , :anchor =&gt; "form" } 放入表格中。在我的情况下使用 simple_form 然后我把这个:&lt;%= simple_form_for @object, :url =&gt; { :action =&gt; "create" , :anchor =&gt; "contact" }, :html =&gt; {:class =&gt; 'form-horizontal' } do |f| %&gt;
        【解决方案5】:

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

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

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

        当然,在他点击“检查”按钮之后,我想再次呈现表单,但要使用此地址字段集的锚点,其中显示地图。

        这是我的 .erb 模板:

        <fieldset id="address" data-preview="<%= params[:preview] ? true : false -%>">    
        <legend>Write you address here, then check it</legend> 
          <div class="field"> 
            <%= f.text_field :address %>
            <input id="preview-button" type="submit" name="preview" value="check">
          </div>
         </fieldset>
        

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

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

        所以操作编辑将在params[:preview] 仍然定义的情况下呈现,这会将#address fieldset data-preview 设置为true。即,这行 HTML 将被渲染:

        &lt;fieldset id="address" data-preview="true"&gt;

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

        $(函数(){ var preview = $("#address").data('preview'); 如果(预览==真){ window.location = window.location.href + "#address"; }; });

        就是这样!

        【讨论】:

          【解决方案6】:

          我建议使用 jQuerys 验证插件。您甚至可以根据需要验证的对象属性来实现自己的表单助手,使用 jquery validate 插件。

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

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

          【讨论】:

            【解决方案7】:

            如果您使用 JQuery,请尝试创建一些仅在渲染后适用的 if 条件并执行以下操作:

            $('#anchor').get(0).scrollIntoView();
            

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2016-04-11
              • 2015-01-22
              • 2010-11-30
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多