javascript - 使用 AJAX 或 JS 刷新 Rails 部分

Question

我正在开发一个 Rails 应用程序，并且我有一些正在选项卡中呈现的表单部分。

我希望能够提交表单，刷新选项卡内的表单，以及更新其他表单，而无需刷新页面。

这是我的应用程序的外观:

这是我的 Controller 的显示页面 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 的 Controller

目前，用户在该模式内提交后，它会关闭，并且页面刷新回“添加示例”的事件选项卡。

我想要的是没有页面刷新，并关闭模式，并且仅更新“添加孢子计数”的内容。这意味着，如果他们向 sample 69-3 添加孢子计数，那么它将不再显示在该选项卡上，而只保留其他两个 sample 。

UPDATE

所以，我在这里遵循了一些说明:https://coderwall.com/p/kqb3xq/rails-4-how-to-partials-ajax-dead-easy

我正在处理的页面是 tape_bulk_coc 的显示页面 Controller 。

在此页面上，我正在渲染 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
  end

app/views/spore_type_counts/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正在填充@tape_bulk_coc来自参数的对象。我在我的 spore_type_counts/form 中使用这个对象，但是当它尝试调用 JS 函数来刷新部分时，该对象不再存在，并且当它命中表单内的第一个 if 条件时，我收到错误。

那么，我怎样才能获取这个对象并将其传递回部分以使它全部工作？

Answer 1

你错过了一些东西。请在代码中添加 format.js { 此处的内容 }然后在 Controller 文件夹(spore_type_counts 你的文件夹)中添加文件actionname.js。然后在js代码中添加一条alert行进行测试。请记住，如果没有 format.js 行，服务器将执行 HTML 操作。只需检查服务器端日志，如果您使用的是远程 true，它肯定会添加为 JS 操作。希望