Rails 4 - 用AJAX/JS部分渲染

我需要爲我的Rails應用程序添加一些AJAX/JS功能。Rails 4 - 用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並更新我的對象，而不刷新頁面。

我該怎麼做？還是我需要重構我的應用程序以改變工作方式？

來源

2016-11-01 Cody Pritchard

您需要使用部分內容更新DOM，就像您在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動作中定義，否則該部分將不會呈現。（注意：you really should avoid using instance variables within partials這個原因）

希望幫助！

來源

2016-11-01 19:00:40

謝謝你的回覆。在看到你的答案之前，我已經走得很遠了。我已經有了一個'spore_type_counts/create.js.erb'文件，但正在努力弄清楚放入它的內容。我有一些工作，但看到你的回答後，我完成了它。解決方案來自'create.js.erb'：'$（'＃spore_count'）。remove（）; （「＃samples'）。show（）。html（」<％= j render（'tape_bulk_cocs/sporeCounts'）％>「）;' –

有沒有辦法在同一時間更新其他標籤顯示他們的內容？具體來說，我的「Saved Samples」標籤。當我提交'spore_type_count'時，我需要'Saved Samples'選項卡中的示例進行更新，以便用戶無需刷新頁面即可查看spore_count –

我很高興能提供幫助！要回答你關於更新其他標籤的問題......是的，你當然可以。請記住 - 您可以完全訪問js.erb模板中的當前呈現的HTML，因此只需使用jQuery更新所需的選項卡的內容即可。添加另一行JavaScript選擇其他選項卡，並將其內容更新爲任何您需要的內容。 –

Rails 4 - 用AJAX/JS部分渲染

回答

相關問題