我有一个“用户”模型。我在用户索引页面上有一个用户列表,每个用户旁边都有一个编辑按钮。我想单击每个用户的编辑按钮,这将打开 Bootstrap 模式。
在 Bootstrap 模式上,我想显示可以编辑的用户记录。编辑表单将来自 _form.html.erb 部分,它将用于新的和编辑用户 Controller 方法。
当我单击更新按钮时,我希望模态表单更新记录,关闭模态并使用更新的记录更新索引页。
问题
每次我单击编辑链接时,模式都会打开并显示 _forms 部分,但它是针对新记录,而不是我要编辑的记录。我认为这是因为rails运行@user.persisted? helper 响应 false,因此它使用用户 Controller 中的“create”方法而不是“edit”方法。
保存记录时 Bootstrap 模式不会关闭。
你能告诉我如何让它发挥作用吗?
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">×</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
最佳答案
当前表单不适合编辑记录,请将其更改为:
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">×</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
关于jquery - 打开 Bootstrap Modal 以在 Ruby on Rails 中编辑记录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20851955/