0

使用“form_for”为“人”模型构建人。这是 UJS 在复选框单击时显示和隐藏 div。

人.js

  window.onload = function() {
    $('#is_student_chkbx').click(function() {
      return $('#student_properties').toggle();
    });
    return true;
  };

生成页面人员/新

...
<input id="is_student_chkbx" name="person[role_attributes][is_student]" type="checkbox" value="true" />

<div id='student_properties' style='display:none;'>
  <p>Test text</p>
</div>
...

people_controller.rb

class PeopleController < ApplicationController
  def new
    @person = Person.new
    @person.build_role
  end

  def create
    @person = Person.new(params[:person])
    ...
    @person.save ? redirect_to(person_path(@person)) : render(action: :new)
  end
end

但有一个问题。当表单包含错误（例如由于模型中的验证而导致“名称不能为空”）时，render(action: :new)会发生但'student_properties'即使'is_student_chkbx'选中了 div 也是不可见的。因此，当我再次单击'is_student_chkbx'时-> 未选中复选框，但'student_properties'显示了 div。

那么如何记住这个div的状态呢？

我试图添加if ($('#is_student_chkbx').is(':checked')) {$('#student_properties').show();}，window.onload但它没有发生render(action: :new)

4

2 回答 2

1

为了让它工作，我使用了（感谢 rb512，他指出了我的注意）： 

<div id='student_properties' style='display:<%= @person.role.is_student ? 'block' : 'none' %>;'>

代替：

<div id='student_properties' style='display:none;'>

但更好的方法是使用 CSS Class：

.hidden {
  display:none;
}

然后目标字符串将如下所示：

<div class='your_other_class <%= 'hidden' unless @person.role.is_student %>' id='student_properties'>
于 2012-08-23T08:46:47.400 回答
0

在您的新操作中添加以下内容：
更新：错过了引号
@person.role.is_student = false || params['is_student_chkbx']

于 2012-08-17T10:17:18.430 回答