Question

我有一个“用户”模型。我在用户索引页面上有一个用户列表，每个用户旁边都有一个编辑按钮。我想点击每个用户的编辑按钮，这将打开一个bootstrap模式。

在bootstrap模式中，我想显示我可以编辑的用户记录。编辑表单将来自_form.html.erb部分，该部分将用于新的和编辑用户控制器方法。

当我点击更新按钮时，我希望模态表单更新记录，关闭模式并使用更新的记录更新索引页。

问题

每次点击编辑链接时，模态都会打开并显示_forms部分，但它是用于新记录，而不是我要编辑的记录。我认为这是因为rails运行@ user.persisted？响应为false的助手，因此它使用用户控制器中的“创建”方法而不是“编辑”方法。
保存记录时，引导模式不会关闭。

你能告诉我如何让它发挥作用吗？

用户/ _form.html.erb

<%= form_for(@user, remote: true) do |f| %>
    <% if @user.errors.any? %>
        <div id="error_explanation">
          <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2>

          <ul>
            <% @user.errors.full_messages.each do |msg| %>
                <li><%= msg %></li>
            <% end %>
          </ul>
        </div>
    <% end %>

    <div class="field">
      <%= f.label :name %>
      <br>
      <%= f.text_field :name %>
    </div>
    <div class="field">
      <%= f.label :company %>
      <br>
      <%= f.text_field :company %>
    </div>
    <div class="field">
      <%= f.label :email %>
      <br>
      <%= f.text_field :email %>
    </div>

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

用户/ create.js.erb

$(".usersTable").replaceWith("<%=j render :partial=> 'users/update_user', :locals => {users: @users }%>");
$("input[type=text]").val("");

$('#myModal').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

用户/ index.html.erb

<h1>Listing users</h1>

<table class="usersAll">
  <thead>
    <tr>
      <th>Name</th>
      <th>Company</th>
      <th>Email</th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>

  <tbody class="usersTable">
    <% @users.each do |user| %>
      <tr>
        <td><%= user.name %></td>
        <td><%= user.company %></td>
        <td><%= user.email %></td>
        <td><%= link_to 'Show', user %></td>
        <td><%= link_to 'Edit',  '#', 'data-target' => '#myModal', 'data-toggle' => 'modal'  %></td>
        <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Add User
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <%= render 'users/form' %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

/controllers/users_controller.rb

class UsersController < ApplicationController
  before_action :set_user, only: [:show, :edit, :update, :destroy]

  # GET /users
  # GET /users.json
  def index
    @users = User.all
    @user = User.new
  end

  # GET /users/1
  # GET /users/1.json
  def show
  end

  # GET /users/new
  def new
    @user = User.new
  end

  # GET /users/1/edit
  def edit
    @user = User.find(params[:id])
  end


  # PATCH/PUT /users/1
  # PATCH/PUT /users/1.json
  def update
    respond_to do |format|
      if @user.update(user_params)

        format.js {}
      else
        format.html { render action: 'edit' }
        format.json { render json: @user.errors, status: :unprocessable_entity }
      end
    end
  end

Answer 1

当前表单不用于编辑记录，请将其更改为：

用户/ index.html.erb

<h1>Listing users</h1> <table class="usersAll"> <thead> <tr> <th>Name</th> <th>Company</th> <th>Email</th> <th></th> <th></th> <th></th> </tr> </thead> <tbody class="usersTable"> <% @users.each do |user| %> <tr> <td><%= user.name %></td> <td><%= user.company %></td> <td><%= user.email %></td> <td><%= link_to 'Show', user %></td> <td> <%= link_to 'Edit', '#', 'data-target' => "#myModal_#{user.id}", 'data-toggle' => 'modal' %> <div class="modal fade" id='<%= "myModal_#{user.id}" %>' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <%= render 'users/form', user: user %> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </td> <td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td> </tr> <% end %> </tbody> </table>  <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Add User </button>

用户/ _form.html.erb

<%= form_for(user, remote: true) do |f| %> <% if @user.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(@user.errors.count, "error") %> prohibited this user from being saved:</h2> <ul> <% @user.errors.full_messages.each do |msg| %> <li><%= msg %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= f.label :name %> <br> <%= f.text_field :name %> </div> <div class="field"> <%= f.label :company %> <br> <%= f.text_field :company %> </div> <div class="field"> <%= f.label :email %> <br> <%= f.text_field :email %> </div> <div class="actions"> <%= f.submit %> </div> <% end %>

如果您想点击提交以刷新整个页面，只需从_form.html.erb中删除remote：true

Answer 2

@aquajach已经为您提供了解决第一个问题的正确代码。请注意，您的问题出现是因为您没有将'user'参数发送到表单partial，而是使用@user来构建表单，这是您在new的索引操作中初始化的变量（所以它是空的）。当@aquajach发送正确的参数时，您需要将模态代码放在`.each'循环中，否则无法告诉您希望每个模态显示哪个用户的信息。

另请注意，编辑link_to使用“＃”作为其网址。这意味着它将链接到无处，并且绝对不会返回到服务器上的控制器（既不编辑也不创建）。

至于你的第二个问题。请注意，“关闭”按钮具有data-dismiss="modal"，但“保存更改”按钮不会。附加该代码，以使其隐藏模态。

打开Bootstrap Modal以编辑Ruby on Rails中的记录

2 个答案: