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并更新我的对象，而不刷新页面。

我该怎么做？或者我需要重新构建我的应用程序以不同的方式工作？

Answer 1

您需要使用部分内容更新DOM，就像您在new.js.erb模板中所做的那样。现在你只是说＆＃34;渲染这个部分＆＃34;但该页面不知道如何使用该内容更新自己，除非您告诉它如何通过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因此）

希望有所帮助！

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

1 个答案: