如何对错误消息使用 Scriptaculous 效果

Question

我想对错误消息使用一些 Scriptaculous 效果。

<% form_for(@page) do |f| %>
    <%= f.label :name %>
    <%= f.text_field :name %>
    <%= f.error_message_on "name" %>

    <%= f.label :content %>
    <%= f.text_field :content %>
    <%= f.error_message_on "content" %>

    <%= f.submit 'Create' %>
<% end %>

我的第一个想法是将错误消息放入 div 标签中并在控制器中使用 page.visual_effect 。但我不知道如何选择会受到影响的正确div。

<% form_for(@page) do |f| %>
    <%= f.label :name %>
    <%= f.text_field :name %>
    <div id="errorname"><%= f.error_message_on "name" %></div>

    <%= f.label :content %>
    <%= f.text_field :content %>
    <div id="errorcontent"><%= f.error_message_on "content" %></div>

    <%= f.submit 'Create' %>
<% end %>

或者我应该考虑一些 if 条件并从那里调用它们。顺便说一句，我不知道该怎么做。我们不能做类似 f.error_message_on "name", :visual_effect => 的事情吗？ ... 任何帮助将不胜感激。

Answer 1

您在 div 中换行的做法是正确的，但是您可以在视图中这样做：

<%= f.error_message_on "name",
      :css_class => "inputError" %>

可能有很多方法可以做到这一点。让控制器返回 rjs 是一种方法。为了不引人注目（被认为是最佳实践），您需要包含一个 javascript 文件，该文件在加载页面时会触发 scriptaculous 方法。我使用 low pro 库来实现不显眼的 javascript。这是我的建议：

布局文件：

<%= javascript_include_tag :defaults, ‘lowpro’, 'form_behaviors.js' %>

javascript_file_for_form_actions.js：

Event.addBehavior({ 
  '.inputError' : function() {
    this.hide();
    this.blindUp();
  }
});

您还可以使用 content_for 有条件地加载 javascript 文件并更改布局文件。

查看文件：

<% content_for(:javascript) do %> <%= javascript_include_tag “form_behaviors” %>
<% end %>

布局文件中的某处：

<% yield :javascript %>

您可以获得一个 unobtrusive 插件，其中也包含 lowpro。欲了解更多信息Peepcode有一个关于lowpro的很好的pdf文件，以及一些很好的截屏视频JavaScript。

Answer 2

只需将错误消息放在可识别的元素中，例如：

<div id="bob">error messages here</div>

然后在 javascript 中，您可以执行以下操作：

$('bob').blindUp();