使用AJAX或JS刷新Rails部分
我正在处理一个rails应用程序，我在选项卡中呈现了几个表单部分。
我希望能够提交表单，在选项卡中刷新表单，以及更新其他表单，而无需刷新页面。
下面是我的应用程序的外观：
这是我的控制器tape_bulk_coc的显示页面。此页的主要代码如下：
<div class="large-12 columns large-collapse" style="padding-top: 2%; padding-left: 5%; padding-right: 5%">
<div class="large-2 columns">
<ul class="tabs vertical" id="example-vert-tabs" data-tabs>
<li class="tabs-title" id="job_links"><a href="#panel1v" aria-selected="true">Job Information</a></li>
<li class="tabs-title" id="job_links"><a href="#panel2v">Lab/Insp/Clr Work</a></li>
<li class="tabs-title" id="job_links"><a href="#panel3v"><%= @tape_bulk_coc.cli_type.job_type.job_type %> Types</a></li>
<li class="tabs-title is-active" id="job_links"><a href="#panel4v">Add Samples</a></li>
<% if @tape_bulk_coc.tape_bulk_coc_samples.any? %>
<li class="tabs-title" id="job_links"><a href="#panel5v"> <%=@tape_bulk_coc.tape_bulk_coc_samples.count %> Saved Samples </a></li>
<% end %>
<li class="tabs-title" id="job_links"><a href="#panel6v">Add Spore Counts ( <%= @missing_spore_count.count %> )</a></li>
<li class="tabs-title" id="job_links"><a href="#panel7v">CoC Reports</a></li>
<li class="tabs-title"><a href="#panel8v">New Job</a></li>
<li class="tabs-title"><a href="#panel9v">All Jobs</a></li>
<li class="tabs-title"><a href="#panel10v">All Reports</a></li>
</ul>
</div>
<div class="large-10 columns">
<div class="tabs-content vertical" data-tabs-content="example-vert-tabs">
<div class="tabs-panel" id="panel1v" style="border-left: solid 1px #f2f2f2">
<%= render 'jobs/show' %>
</div>
<div class="tabs-panel" id="panel2v" style="border-left: solid 1px #f2f2f2">
<%= render 'jobs/jobtypes' %>
</div>
<div class="tabs-panel" id="panel3v" style="border-left: solid 1px #f2f2f2">
<%= render 'job_types/show' %>
</div>
<div class="tabs-panel is-active" id="panel4v" style="border-left: solid 1px #f2f2f2">
<%= render 'tape_bulk_cocs/show' %>
<hr>
<%= render 'tape_bulk_coc_samples/form' %>
</div>
<div class="tabs-panel" id="panel5v" style="border-left: solid 1px #f2f2f2">
<%= render 'tape_bulk_cocs/samples' %>
</div>
<div class="tabs-panel" id="panel6v" style="border-left: solid 1px #f2f2f2">
<%= render 'spore_type_counts/form' %>
</div>
<div class="tabs-panel" id="panel7v" style="border-left: solid 1px #f2f2f2">
<!-- render 'lead_reports/index' %> -->
</div>
<div class="tabs-panel" id="panel8v" style="border-left: solid 1px #f2f2f2">
<%= render 'jobs/form' %>
</div>
<div class="tabs-panel" id="panel9v" style="border-left: solid 1px #f2f2f2">
<%= render 'jobs/index' %>
</div>
<div class="tabs-panel" id="panel10v" style="border-left: solid 1px #f2f2f2">
<%= render 'all_reports/index' %>
</div>
</div>
</div>当页面加载/刷新时，这是设置为活动的选项卡。
提交时要刷新的表单在“添加孢子计数”选项卡中：
当您单击按钮“添加模式孢子计数”时，将出现一个包含表单数据和提交按钮的模式窗口。这将提交给spore_type_counts的控制器。
当前，用户在该模式内提交后，它将关闭，页面将刷新回"Add“的活动选项卡。
我想要的是没有页面刷新，并有模式关闭，只有内容的“添加孢子计数”来更新。这意味着，如果他们在样本69-3中添加一个孢子计数，那么它将不再显示在该选项卡上，并且只有另外两个样本将保留下来。
更新
因此，我在这里遵循了一些说明：https://coderwall.com/p/kqb3xq/rails-4-how-to-partials-ajax-dead-easy
我正在处理的页面是tape_bulk_coc控制器的显示页面。
在这个页面上，我在我的一个选项卡中呈现spore_type_counts/form。
简而言之，spore_type_counts/form看起来是这样的：
<div id="test">
<% if @tape_bulk_coc.tape_bulk_coc_samples.any? %>
<% @tape_bulk_coc.tape_bulk_coc_samples.each do |cur| %>
<% if !cur.spore_type_count %>
<div class="reveal" data-reveal>
<%= form_for(@spore_type_count, remote: true) do |f| %>
"code for the form"
<% end %>
</div>
<% end %>
<% end %>
<% end %>
</div>spore_type_counts_controller.rb
def create
@spore_type_count = SporeTypeCount.new(spore_type_count_params)
respond_to do |format|
if @spore_type_count.save
format.js
end
end
endapp/view/孢子类型_计数/create.js.erb
$("#test").html("<%= escape_javascript(render partial: 'spore_type_counts/form' ) %>");
当我提交表单时，数据库中的所有内容都会被正确地提交和更新。响应以JS的形式出现，spore_count被正确地添加到CoC中，但是模型没有关闭，页面也没有更新。
这是我从服务器上看到的响应：
NoMethodError - undefined method tape_bulk_coc_samples' for nil:NilClass: app/views/spore_type_counts/_form.html.erb:12:行是我现在需要帮助的地方。
如果我正确地理解了它，那么当我第一次来到这个页面时，我的tape_bulk_cocs_controller将从params中填充@tape_bulk_coc对象。我在我的spore_type_counts/form中使用这个对象，但是当它试图调用JS函数来刷新这个部分时，这个对象就不在了，当它击中表单中的第一个条件时，我会得到一个错误。
那么，我如何才能得到这个对象并将其传递回分部以使其全部工作呢？
回答 1
Stack Overflow用户
发布于 2016-11-01 05:39:52
你错过了什么。请在代码中添加format.js { then }，然后在控制器文件夹(spore_type_counts yours文件夹)中添加一个文件actionname.js。然后在js代码中添加一条警报行进行测试。请记住，如果没有format.js行，服务器将作为HTML执行。只要检查服务器端日志，如果您使用的是远程true，它就会轻率地添加为JS操作。希望
https://stackoverflow.com/questions/40353233
复制相似问题
腾讯云开发者
