打开Bootstrap Modal以在Ruby on Rails中编辑记录 [英] Open a Bootstrap Modal to edit a record in Ruby on Rails

问题描述

我有一个用户"模型.我在用户索引页面上有一个用户列表，每个列表旁边都有一个编辑按钮.我想为每个用户单击编辑按钮，这将打开一个引导模态.

I have a "user" model. I have a list of users on the user index page with an edit button beside each. I want to click on the edit button for each user which will open a bootstrap modal.

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

On the bootstrap modal I want to display the user record which I can edit. The edit form will be from a _form.html.erb partial which will be used for the new and edit user controller methods.

当我单击更新"按钮时，我希望模式窗体更新记录，关闭模式并使用更新后的记录更新索引页.

When I click the update button, I want the modal form to update the record, close the modal and update the index page with the updated record.

问题

1. 每次我单击编辑链接时，模式都会打开并显示_forms部分，但这是一个新记录，而不是我要编辑的记录.我认为这是因为rails运行@ user.persisted吗?响应为false的帮助程序，因此它在用户控制器中使用创建"方法，而不是编辑"方法.

1. Every time I click on the edit link the modal opens and displays the _forms partial but it is for a new record, not the record I want to edit. I think this is because rails runs the @user.persisted? helper which responds with false so it uses the "create" method in the user controller instead of the "edit" method.

保存记录时，引导程序模式不会关闭.

The bootstrap modal does not close when I save the record.

你能告诉我如何使它工作吗?

Can you tell me how to get this to work?

user/_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 %>

users/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();

users/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

推荐答案

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

The current form is not for editing the record, change it to:

users/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">&times;</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><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
          </div><!-- /.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>

user/_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

If you want clicking the submit to refresh the entire page, just remove remote: true from the _form.html.erb

这篇关于打开Bootstrap Modal以在Ruby on Rails中编辑记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！