ruby-on-rails - Rails AJAX 不渲染部分
问题描述
我有一个表单来创建一个新source
的,sources#create
上面有一个模式来创建一个新的author
. 用户可以创建一个新author
的以分配给源,也可以从清单中选择一个现有的。
理想情况下,如果他们确实需要创建新作者,则authors#create
表单会以 AJAX 方式创建作者,并且新作者将自动出现在可与源相关联的作者清单中。
以下是作者选择复选框的代码sources#create
:
<section id="author" class="white h-100">
<h2>Author(s)</h2>
<% if @user_authors.count != 0 %>
<p class="text-center">Select an author to add below or <a data-toggle="modal" data-target="#newAuthorModal">create a new author</a>.</p>
<div id="#authorsChecklist"><%= render partial: "authors/checklist", locals: { f: f } %></div>
<% else %>
<p class="text-center"><a data-toggle="modal" data-target="#newAuthorModal">Create a New Author</a></p>
<% end %>
</section>
以此为authors/_checklist.html.erb
部分:
<div class="boxed-scroll">
<%= f.collection_check_boxes :author_ids, @user_authors.sort_by(&:last_name), :id, :last_first do |b| %>
<div class="field form-check" style="display: block">
<%= b.check_box class: "form-check-input" %>
<%= b.label class: "form-check-label" %>
</div>
<% end %>
</div> <!-- boxedscroll -->
这作为创建作者的模态:
<!-- New Author Modal -->
<div class="modal fade" id="newAuthorModal" tabindex="-1" role="dialog" aria-labelledby="newAuthorModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="newAuthorModalLabel">Add a New Author</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<%= render partial: "authors/js_form", locals: {author: @new_author} %>
</div>
</div>
</div>
</div>
这是create
方法:
def create
@author = Author.new(author_params)
@author.user_id = current_user.id
respond_to do |format|
if @author.save
format.html { redirect_back(fallback_location: author_path(@author)) }
format.json { render :show, status: :created, location: @author }
format.js
else
format.html { render :new }
format.json { render json: @author.errors, status: :unprocessable_entity }
end
end
end
这是authors/create.js
:
$("#authorsChecklist").html("<%= escape_javascript(render partial: 'authors/checklist', locals: { f: f } ) %>");
到目前为止,作者确实成功创建:
Started POST "/authors" for ::1 at 2020-01-31 21:23:26 -0800
Processing by AuthorsController#create as JS
Parameters: {"utf8"=>"✓", "author"=>{"first_name"=>"Liz", "middle_initials"=>"", "last_name"=>"Bayardelle", "notes"=>""}, "commit"=>"Save Author Info"}
User Load (1.0ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 ORDER BY "users"."id" ASC LIMIT $2 [["id", 1], ["LIMIT", 1]]
↳ app/controllers/application_controller.rb:5
(0.1ms) BEGIN
↳ app/controllers/authors_controller.rb:32
User Load (0.3ms) SELECT "users".* FROM "users" WHERE "users"."id" = $1 LIMIT $2 [["id", 1], ["LIMIT", 1]]
↳ app/controllers/authors_controller.rb:32
Author Create (0.8ms) INSERT INTO "authors" ("first_name", "middle_initials", "last_name", "notes", "user_id", "created_at", "updated_at") VALUES ($1, $2, $3, $4, $5, $6, $7) RETURNING "id" [["first_name", "Liz"], ["middle_initials", ""], ["last_name", "Bayardelle"], ["notes", ""], ["user_id", 1], ["created_at", "2020-02-01 05:23:26.279449"], ["updated_at", "2020-02-01 05:23:26.279449"]]
↳ app/controllers/authors_controller.rb:32
(0.4ms) COMMIT
↳ app/controllers/authors_controller.rb:32
Rendering authors/create.js
Rendered authors/create.js (0.4ms)
Completed 200 OK in 214ms (Views: 27.8ms | ActiveRecord: 42.7ms)
但是,当您点击提交并且作者没有被添加到复选框列表时,模式不会消失(基本上部分不会刷新)。当您手动点击刷新时,作者会完美显示。
任何人都可以看到如何正确地将其发送到 AJAX 吗?所需的行为是当您点击提交时模式消失,并且清单部分为 AJAX-ically 刷新以便作者出现。
更新
根据评论建议,我将其添加到create.js
,这成功地使模态消失,尽管部分没有刷新:
$('#newAuthorModal').modal('hide');
然后我发现这个问题表明我需要更改create.js
为create.js.erb
. 这以某种方式阻止了模式消失,但产生了一个服务器错误:
NameError - undefined local variable or method `f' for #<#<Class:0x00007f9e1e0c0ad0>:0x00007f9e18101d38>:
app/views/authors/create.js.erb:2:in `_app_views_authors_create_js_erb__3387754959944580247_70158492637620'
第二次更新
在查阅 的文档后collection_check_boxes
,f.
之前collection_check_boxes
是不必要的。我将其删除并, locals: { f: f }
从我的create.js.erb
. 模态现在正确关闭并且错误消失了,但我仍然必须点击刷新才能显示名称。
解决方案
里面有sources#create
个错字:
<div id="#authorsChecklist">
本来应该:
<div id="authorsChecklist">
并且控制器方法需要包含以下定义@user_authors
:
format.js do
@user_authors = Author.where(user_id: current_user.id)
end
现在它起作用了!
推荐阅读
- html - 电报降价语法:粗体*和*斜体?(2018 年 9 月)
- arrays - Verilog中多维数组的逻辑运算
- java - 没有为片段 ViewModelFactory 注入用例
- angular - api url 的方法:/something/{{id}}/something - Angular 6
- python - google-cloud 依赖项在 python 应用程序引擎中被覆盖
- ios - 通过Testflight中的错误上传相同版本下的新Build
- python - 如何使用 python 写入输出的 txt 文件?
- selenium - 多个自动化测试人员如何在同一个 selenium 项目中工作
- java - 使用 log4j2 将日志发送到 Kafka
- javascript - BCH 交易失败:缺少输入 25