如何在 Rails 中执行 AJAX-y 条件显示/隐藏表单字段？

Posted 2023-02-26

【中文标题】如何在 Rails 中执行 AJAX-y 条件显示/隐藏表单字段？

【英文标题】：How can I do AJAX-y conditional show/hide form fields in Rails?

【发布时间】：2009-02-05 03:02:07

【问题描述】：

我想在 Rails 中显示或隐藏表单中的一些字段，具体取决于表单中选择字段的状态。我（当前）不需要对字段进行第二次数据库查找，因此我试图将其全部限制在视图中。我已经勾勒出大纲，但我在实施细节方面遇到了一些麻烦。

我最初的想法是使用observe_field 并调用 Element.show 等，但后来我必须编写一个 javascript 条件。这可能必须起作用，但如果可以的话，我想避免它。

另一种方法是使用observe_field 请求RJS 模板，并使用replace_html 插入字段。不错，但由于我使用的是form_for 块，我要么必须通过 RJS 模板一直传递表单实例才能做到这一点。

我还可以在每次传递时更新记录，并在新条件下显示表单，但这是我试图避免的。在视图中完成这一切会简单得多。

我在这里缺少什么？在 Rails 中，有条件的显示/隐藏表单的公认做法是什么？

【参考方案1】：

作为一名 Rails 开发人员，我建议坚持不显眼的 javascript 原则。对于 Rails，这通常意味着您不应该只编写一个大视图来处理所有功能。这使您的 HTML 视图更易于开发和维护，使您的行为更易于维护，并且通常可以更好地理解您的应用程序正在做什么。在这方面，我不惜一切代价避免使用 rails javascript helpers。

我要做的是将您的行为拆分为您自己编写的 javascript 文件。使用诸如 jquery 之类的库（我最喜欢这种事情是 lowpro，但我将是第一个承认我的方式有点设置的人），将事件处理程序附加到特定元素（或一整类元素一次）。

对于选择框，onChange 处理程序将在用户更改选择时触发。元素上的selectedIndex 属性将告诉您选择了哪个选项，options 数组将让您查找关联的选项。因此，在您的处理程序中，您可以执行以下操作（使用原型）：

function(e) 
  var element = Event.element(e)
  var index = element.selectedIndex
  var option = element.options[index]

  if(option.value == "Show fields")
    $('hidden-fields').show()
  else
    $('hidden-fields').hide()

【参考方案2】：

我用几种不同的方式处理同一件事：

<%= link_to_function( check_box_tag "model[attribute_name]" ) do |page| 
    page.toggle :model_attribute_name
end-%>

<span style="display:none;" id="model_attribute_name">  
<%= f.text_area :other_conditional_attribute -%>  
</span>

或

<%= link_to_function "Conditional Item", :class => "your-style-class" do |page| 
    page.insert_html :bottom, :other_conditional_attribute, :partial => 'conditional_attribute_partial', :object => Object.new, :locals => :local_variable => local_variable
end-%>

rjs 东西/原型助手很棒。Rails API: PrototypeHelpersRails API: JavascriptHelpers

【参考方案3】：

我建议使用一个简单的 JQuery 函数，如下所示：

$('a#slick-show').click(function() 
    $('#slickbox').show('slow');
    return false;
  );

Jquery中显示/隐藏的基础知识，有教程here。