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部分渲染

回答

相关问题