jquery - 如何使用 CoffeeScript 和 JQuery 动态显示/隐藏 Rails 表单字段？

Question

尝试构建一个根据用户选择的值提交到多个模型的表单。

我认为“#196:嵌套模型表单”( http://railscasts.com/episodes/196-nested-model-form-revised ) 的 Railscast 剧集可能会有所帮助，但该解决方案并不完全是我想要的。我创建了多个模型，它们之间存在关联(belongs_to 和 has_many)，并包含 accepts_nested_attributes_for 声明以支持表单将生成的对象:

class User < ActiveRecord::Base
  attr_accessible :password_digest, :uname, :user_type, :artist_attributes, :sponsor_attributes
  has_many :artists
  has_many :sponsors
  accepts_nested_attributes_for :artists, :sponsors

  validates :uname, presence: true, uniqueness: true
  has_secure_password
end

class Artist < ActiveRecord::Base
  attr_accessible :user_id, :address, :email, :genre, :name, :phone, :photo, :preferences, :rate, :terms, :artist_type
  belongs_to :user

  validates :email, :genre, :name, :phone, :photo, :preferences, :pwd, :terms, :artist_type, :uname, presence: true
  validates :rate, numericality: {greater_than_or_equal_to: 0}
  validates :phone, numericality: true  
  validates_length_of :phone, :minimum => 10, :message => "Phone numbers need to be at least 10 digits"
  validates :email, uniqueness: true
end

class Sponsor < ActiveRecord::Base
  attr_accessible :user_id, :address, :email, :name, :phone
  has_many :venues
  belongs_to :user

  validates :email, :name, :phone, presence: true
  validates :email, uniqueness: true
  validates :phone, numericality: true
  validates_length_of :phone, :minimum => 10, :message => "Phone numbers need to be at least 10 digits"
end

我使用 form_for 映射到用户模型，使用 fields_for 映射到用户表单部分中的赞助商和艺术家模型(在 Users#new 中呈现) View ):

<%= form_for(@user) do |f| %>
  # Error handling omitted 
  <div class="field">
    <%= f.label :uname, "User Name" %><br />
    <%= f.text_field :uname %>
  </div>
  <div class="field">
    <%= f.label :pwd, "Password" %><br />
    <%= f.password_field :pwd, size: 30 %>
  </div>
  <div class="field">
    <%= f.label :pwd, "Confirm Password" %><br />
    <%= f.password_field :pwd, size: 30 %>
  </div>

  <!-- Want to use these radio buttons to dynamically display/hide the fields for the Sponsor and Artist models -->
  <div class="field">
    <%= f.label :user_type, "Register as: " %><br />
    <%= f.radio_button :user_type, "Sponsor", class: "sponsor_fields" %><%= f.label :user_type, "Sponsor", value: "Sponsor" %>
    <%= f.radio_button :user_type, "Artist", class: "artist_fields" %><%= f.label :user_type, "Artist", value: "Artist" %>
  </div>
  <!-- End dynamic display radio buttons --> 

  <div id="sponsor_fields" style="display:none;">
    <% f.fields_for :sponsor do |s| %>
    <div class="field">
      <%= s.label :name %><br />
      <%= s.text_field :name %>
    </div>
    <div class="field">
      <%= s.label :email %><br />
      <%= s.text_field :email %>
    </div>
    <div class="field">
      <%= s.label :phone %><br />
      <%= s.text_field :phone %>
    </div>
    <div class="field">
      <%= s.label :address %><br />
      <%= s.text_area :address %>
    </div>
    <% end %>
  </div>
  <div id="artist_fields" style="display:none;">
    <% f.fields_for :artist do |a| %>
    <div class="field">
      <%= a.label :name %><br />
      <%= a.text_field :name %>
    </div>
    <div class="field">
      <%= a.label :email %><br />
      <%= a.text_field :email %>
    </div>
    <div class="field">
      <%= a.label :phone %><br />
      <%= a.text_field :phone %>
    </div>
    <div class="field">
      <%= a.label :address %><br />
      <%= a.text_area :address %>
    </div>
    <div class="field">
      <%= a.label :artist_type %><br />
      <%= a.text_field :artist_type %>
    </div>
    <div class="field">
      <%= a.label :rate %><br />
      <%= a.number_field :rate %>
    </div>
    <div class="field">
      <%= a.label :terms %><br />
      <%= a.text_field :terms %>
    </div>
    <div class="field">
      <%= a.label :genre %><br />
      <%= a.text_area :genre %>
    </div>
    <div class="field">
      <%= a.label :preferences %><br />
      <%= a.text_area :preferences %>
    </div>
    <div class="field">
      <%= a.label :photo %><br />
      <%= a.text_field :photo %>
    </div>
  <% end %>
  </div>

  <div class="actions">
  <%= f.submit %>
  </div>
<% end %>

这是我试图用来显示 <DIV> 的 Coffeescript 和 Jquery 代码(注意:我不是 Jquery 专家，所以我确信这个语法存在重大问题)。具有包含单选按钮元素值的 ID 属性的 block :

jQuery ->
    $('form').on 'change', 'input[name=user_type]', (event) ->
        curr = $(this).value.toLowerCase()
        alt = $(this).closest('input[name=user_type]').value.toLowerCase()
        $('#'+ alt +'_fields').hide()
        $('#'+ curr +'_fields').show()

当我单击单选按钮时，没有任何反应。我认为这可能与display:none有关每个 <DIV> 中的属性，所以我删除了它们并意识到 fields_for 表单元素根本不显示。

同一个表单部分中可以包含两个 fields_for block 吗？应该如何编码才能显示表单元素？我希望默认情况下隐藏赞助商和艺术家表单元素，但在单击相应的单选按钮时显示。

我是 Ruby on Rails、Jquery 和 Coffeescript 的新手，因此非常感谢您的帮助。仅供引用:我使用 Railsinstaller(Ruby 版本 1.9.3)安装了 Rails 3.2.13，并验证了 Coffeescript 版本 1.6.3 已安装。有什么想法吗？

更新在Bartosz的帮助下追踪到了这个问题(谢谢你)。我查看了浏览器中渲染的 HTML 源代码，发现 jQuery 选择器中使用的 name 属性值不正确。而不是$('input[name=user_type]') ，选择器应包含 Controller 名称 $('input[name="user[user_type]"]') 。我修改了 Bartosz 的更简洁的 Coffeescript 代码，以使用正确命名的选择器实现所需的显示/隐藏功能:

jQuery ->
    $('input[name="user[user_type]"]').on 'click', (event) ->
        curr = event.target.value.toLowerCase()
        $('[id$=_fields]').hide()
        $('#'+curr+'_fields').show()

希望这可以帮助其他像我一样寻找答案的人......

Answer 1

回调是否被触发？

试试这个:

$('input[name=user_type]').change (e) ->
    curr = e.target.value.toLowerCase()
    $('[id$=_fields]').hide()
    $('#'+ curr +'_fields').show()