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 映射到用户表单部分的赞助商和艺术家模型（在用户#new中呈现）视图）：

<%= 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 %>

这里是Coffeescript和Jquery代码（注意：我不是Jquery专家，所以我确定这个语法有重大问题）我试图用它来显示带有ID的<DIV>块包含单选按钮元素值的属性：

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 块可以包含在同一表单部分中吗？如何编码以使表单元素显示？我希望默认情况下隐藏赞助商和艺术家表单元素，但是在单击相应的单选按钮时显示。

我是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]')，而不是$('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()

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

1 个答案: