Question

我有一个用于创建新任务的表格。 “任务”表单中的一个字段是负责任务的人。

如果在填写“任务”表单时需要将新的“个人”添加到数据库中，我可以打开“模态”，该表单是用于创建新“个人”的表单。这样可以很好地工作并将更改提交到数据库，然后关闭模式，但是，除非刷新整个新的Task表单，否则Person字段（这是collection_select）不会更新。

以下是用于新任务表单（“任务”视图下的_form.html.erb）的代码：

<div class='row'>
            <div class='col-xs-12'>
                <%= form_for(@task, :html => {class: "form-horizontal", role: "form"}) do |f| %>

                    <div class="form-group">
                        <div class="control-label col-sm-2">
                            <%= f.label :task_name %>
                        </div>
                        <div class="col-sm-8">
                            <%= f.text_field :task_name, class: "form-control", placeholder: "Name of the task", autofocus: true %>
                        </div>
                    </div>



                    <div class="form-group">
                        <div class="control-label col-sm-2">
                            <%= f.label :person_id %>
                        </div>
                        <div class="col-sm-8">
                            <%= f.collection_select :person_id , current_user.people.order(:last_name), :id, :last_name, {prompt: "Select a person"}, {class: "form-control"} %>
                        </div>
                        <div id="new-person">
                            <!-- <%= link_to '<i class="glyphicon glyphicon-plus"></i>'.html_safe, new_person_path, class: "btn btn-xs btn-info", remote: true %> -->
                            <!-- Button trigger modal -->
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                              Create new person
                            </button>

                        </div>
                    </div>


                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <%= f.submit class: 'btn btn-primary btn-lg' %>
                        </div>
                    </div>
                <% end %>

                <div class="col-xs-4 col-xs-offset-4">
                    [ <%= link_to "Cancel and return to tasks listing", tasks_path %> ]
                </div>
            </div>
        </div>




<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Create New Person</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <%= render 'people/form' %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

这是我的people_controller.rb代码

  def new
    @person = current_user.people.build
  end

  def edit
    @person = current_user.people.find(params[:id])
  end

  def create
    @person = current_user.people.build(person_params)
    respond_to do |format|
      if @person.save
        format.js
        format.html { redirect_to people_path }
        flash[:success] = "Person was saved successfully"
      else
        format.html {render :new }
      end    
    end
  end

这是“人员”视图中create.js.erb文件的代码：

$('#exampleModal').hide();
$('.modal-backdrop').remove();

Rails：提交AJAX表单后刷新collection_select中的值

0 个答案: