Rails 4-使用AJAX / JS進行部分渲染

Question

我需要在我的rails應用程序中添加一些AJAX / JS功能。

這是我正在處理的頁面：

要顯示上方標簽的內容，我在打電話

<%= render 'tape_bulk_cocs/sporeCounts' %>

在這部分內容中是以下代碼（減去顯示文本的html標簽）：

 <div id="samples">
    <% if @tape_bulk_coc.tape_bulk_coc_samples.any? %>    
       <% @tape_bulk_coc.tape_bulk_coc_samples.each do |cur| %>  
          <% if !cur.spore_type_count %>
             <%= link_to 'Add Spore Count', new_spore_type_count_path(:tape_bulk_coc_sample_id=>cur.id), :remote=>true, :id => "new_spore_count", class: "tiny button expanded" %>
          <% end %>
       <% end %>
    <% end %>
 </div>

在我的spore_type_counts_controller/new內部，我有：

  def new
    @spore_type_count = SporeTypeCount.new
    @tape_bulk_sample_id = params[:tape_bulk_coc_sample_id]
    @category_count = [["Rare: 1 to 10","Rare: 1 to 10"], ["Low: 11 to 100","Low: 11 to 100"], ["Medium: 101 to 1000","Medium: 101 to 1000"], ["High: > 1000","High: > 1000"]]

    respond_to do |format|
      format.js
    end
  end

然后，在app/views/spore_type_counts/new.js.erb

$('#samples').hide().after( '<%= j render("spore_type_counts/form") %>' );

到目前為止，一切都按預期工作，當我單擊“添加孢子計數”時，選項卡將更改為如下所示：

這就是我遇到的問題所在。

當我提交spore_type_counts/form我進入了控制器的create動作，它是：

  def create
    @spore_type_count = SporeTypeCount.new(spore_type_count_params)

    respond_to do |format|
      if @spore_type_count.save
        format.js { render 'tape_bulk_cocs/sporeCounts'}
      end
    end
  end

到達此處后，所有內容都會正確提交到數據庫，但是頁面不會更改。 我不知道如何重新渲染tape_bulk_cocs/sporeCounts部分（第一張圖片）。

本質上，一旦提交表單，我就需要從spore_type_count_controller/new回到tape_bulk_coc_controller/show並tape_bulk_coc_controller/show並更新我的對象，而無需刷新頁面。

我怎樣才能做到這一點？ 還是我需要重組我的應用程序以使其工作不同？

Answer 1

您需要使用部分內容來更新DOM，就像在new.js.erb模板中所做的new.js.erb 。 現在，您只是在說“渲染此部分內容”，但是該頁面不知道如何使用該內容進行自我更新，除非您通過JavaScript告訴它如何進行。

嘗試創建一個spore_type_counts/create.js.erb文件，該文件將在SporeTypeCounts#create操作運行后執行。 在該模板內，添加JavaScript代碼，該代碼將使用您從部分展示的內容更新頁面。

例如，

// hide the previous content
$("#spore-count-form").remove();

// show the new content
$('#samples').html("<%= j render('tape_bulk_cocs/sporeCounts') %>");

注意事項：

• 更新上方的選擇器以適合您的應用。 我通常使用data-attributes來標記要使用JavaScript處理的內容（例如data-ujs-target=spore-form ）。 這樣，JS交互不會因意外更改ID或CSS類而中斷。

• 您可能必須更新您的標記才能使用jQuery對其進行修改。

• 如果tape_bulk_cocs/sporeCounts使用任何實例變量，請確保在SporeTypeCounts#create操作中定義了它們，否則將不呈現部分變量。 （ 注意 ：出於這個原因， 您實際上應該避免在局部變量中使用實例變量 ）

希望有幫助！