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操作中定义了它们，否则将不呈现部分变量。 （ 注意 ：出于这个原因， 您实际上应该避免在局部变量中使用实例变量 ）

希望有帮助！