Rails引导程序编辑模态样式与创建模态不同

时间:2016-08-17 20:30:35

标签: ruby-on-rails twitter-bootstrap

我的Rails应用程序中有一个Teacher对象,你可以从一个模态创建它。我正在尝试编辑模式,同时保持相同的样式,但它在编辑模式中显示不同。我目前有一个部分渲染添加模式的内容如下:

index.html.erb:

<!-- Add Teacher Modal -->
 <div class="modal fade" id="addTeacher" role="dialog">
   <div class="modal-dialog">
    <div class="modal-content">
      <%= render 'teachers/test', teacher: Teacher.new %>
    </div>
  </div>
</div>

....

<!-- Edit Teacher Modal -->
 <div class="modal fade" id="editTeacher" role="dialog">
   <div class="modal-dialog">
    <div class="modal-content">
      <%= render 'teachers/test', teacher: teacher %>
    </div>
  </div>
</div>

_test.html.erb:

<%= form_for(teacher, :html => {class: "form-horizontal", autocomplete: "off" }) do |f| %>

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <h4>Add Teacher</h4>
</div>
<div class="modal-body">
  <br>
  <div class="form-group">
    <%= f.label :first_name, "First Name", class: "col-lg-3 control-label" %>
    <div class="col-lg-9">
      <%= f.text_field :first_name, class: "form-control", autofocus: true, required: true  %>
    </div>
  </div>

  <div class="form-group">
    <%= f.label :last_name, "Last Name", class: "col-lg-3 control-label" %>
    <div class="col-lg-9">
      <%= f.text_field :last_name, class: "form-control", required: true  %>
    </div>
  </div>

  <div class="form-group">
    <%= f.label :employee_id, "Employee ID", class: "col-lg-3 control-label" %>
    <div class="col-lg-9">
      <%= f.text_field :employee_id, class: "form-control", required: true  %>
    </div>
  </div>

  <div class="form-group">
    <%= f.label :phone, class: "col-lg-3 control-label" %>
    <div class="col-lg-9">
      <%= f.text_field :phone, class: "form-control", required: true  %>
    </div>
  </div>

  <div class="form-group">
    <%= f.label :alt_phone, "Alternate Phone", class: "col-lg-3 control-label" %>
    <div class="col-lg-9">
      <%= f.text_field :alt_phone, class: "form-control"  %>
    </div>
  </div>

  <div class="form-group">
    <%= f.label :title, class: "col-lg-3 control-label" %>
    <div class="col-lg-9">
      <%= f.select :title, options_for_select(["RECE", "Student", "Assistant", "P/T Assistant", "Supply", "Kitchen Staff", "Supervisor"]), {include_blank: true}, {class: "form-control", required: true} %>
    </div>
  </div>

  <div class="form-group">
    <%= f.label :class_name, "Class Name", class: "col-lg-3 control-label" %>
    <div class="col-lg-9">
      <%= f.select :class_name, @classrooms.all.collect {|a| [a.class_name, a.id]}, {include_blank: "N/A"}, 
      {class: "form-control" } %>
    </div>
  </div>

</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  <%= f.submit 'Submit', class: 'btn btn-primary' %>
</div>

<% end %>

以下是添加和编辑模式的屏幕截图:

添加教师 Add Teacher

编辑老师 Edit Teacher

为什么会发生这种情况的任何想法,因为完全相同的形式是在两个模态中呈现的?感谢所有帮助!

0 个答案:

没有答案