使用AJAX或JS刷新Rails部分

Question

我在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

當前，在用戶在該模式內提交后，它將關閉，並且頁面刷新回到“添加樣品”的活動選項卡。

我想要的是沒有頁面刷新，並且模式關閉，只有“添加孢子計數”的內容要更新。 這意味着，如果他們將孢子計數添加到樣本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
  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:行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函數刷新部分對象時，該對象不再存在，並且在表單中有條件的情況下遇到第一個對象時出現錯誤。

因此，我如何獲得該對象並將其傳遞回局部對象以使其全部正常工作？

Answer 1

你錯過了什么。 請在代碼中添加format.js {在此處}，然后在控制器文件夾（spore_type_counts yours文件夾）中添加文件actionname.js。 然后在js代碼中添加一條警告行以進行測試。 請記住，如果沒有format.js行，則服務器將作為HTML動作執行。 只需檢查服務器端日志，如果您使用remote true，它將被正確地添加為JS操作。 希望