在 RAILS 4 中通过 Ajax 提交表单后，如何更新视图模板？

Question

我正在尝试在rails 中使用ajax 表单并在我的表单上使用Remote => True。

现在可以了，当我点击添加新主题时。会发生以下情况

1.form 部分将附加到正文中（其中包含表单） 2.Bootstrap Modal会显示在里面的表格 3.点击提交后，模态框消失，数据将被存储（成功）

我的问题是原来的 Index.html.erb 视图现在已经过时了，当数据插入我的数据库时，视图仍然显示旧数据。

通过 ajax 成功提交表单后，如何触发我的视图更新？

谢谢！！

我的 subject.rb 控制器

  def new

    @subject = Subject.new({:name => "Default"})
    @subject_count= Subject.count + 1

  end

  def create
    @subject = Subject.new(subject_params)
    if @subject.save
      flash[:toastr] = ["success",'Subject #{@subject.name} successfully created']

      respond_to do |format|
        format.html {redirect_to(:action => "index")}
        format.js 

      end

    else
      @subject_count= Subject.count+1

      render('new')
    end
  end

这是我的索引视图

<% @subjects.each do |subject| %>
<tr class="<%= cycle('odd', 'even') %>">
  <td><%= subject.position %></td>
  <td><%= subject.name %></td>
  <td class="center"><%= status_tag(subject.visible) %></td>
  <td class="center"><%= subject.pages.size %></td>
  <td class="actions">
    <%= link_to("Show", {:action => 'show', :id => subject.id}, :class => 'action show') %>
    <%= link_to("Edit", {:action => 'edit', :id => subject.id}, :class => 'action edit') %>
    <%= link_to("Delete", {:action => 'delete', :id => subject.id}, :class => 'action delete') %>
  </td>
</tr>
<% end %>

我的 new.js.erb

$('body').append(' <%= j render(:partial => "form") %>') 
$('#modalform').modal('show')

我的 create.js.erb

$('#modalform').modal('hide')

Answer 1

让我们重构您的索引文件代码并将@subjects 放在另一个部分中。因为，在创建操作之后，我们需要使用更新的主题列表刷新特定的 div。

#app/views/subjects/index.html.erb 
  <div id='subject_list'>
    <%= render 'subjects %> 
  </div>

现在，使用这个部分来保存您的主题列表：

 #app/views/subjects/ _subjects.html.erb 

  <% @subjects.each do |subject| %>
    <tr class="<%= cycle('odd', 'even') %>">
      <td><%= subject.position %></td>
      <td><%= subject.name %></td>
      <td class="center"><%= status_tag(subject.visible) %></td>
      <td class="center"><%= subject.pages.size %></td>

      <td class="actions">
        <%= link_to "Show", subject, :class => 'action show') %>
        <%= link_to "Edit", edit_subject_path(subject), :class => 'action edit' %>
        <%= link_to "Delete", subject, method: :delete, :class => 'action delete' %>
      </td>
    </tr>
  <% end %>

现在，执行创建操作后，您需要刷新加载的数据。 您当前在索引页面中。

你需要这样做：

# app/controllers/subjects_controller.rb 
  def create
    @subject = Subject.new(subject_params)
    if @subject.save
      flash[:toastr] = ["success",'Subject #{@subject.name} successfully created']
      @subjects = Subject.all 
      # As, you are in index page & when you refresh the specific div(subject_list)
      # this badly needs the @users (all users list again)
      # Don't forget to reinitialize any other instance variable if you are using 
      # in index.html.erb file. 
      respond_to do |format|
        format.html {redirect_to(:action => "index")}
        format.js 
      end

    else
      @subject_count= Subject.count+1
      render :new
    end
  end #end of create action. 

现在在您的 create.js.erb 文件中，您需要刷新特定的 div， 它基本上包含主题列表部分（#subject_list div）

  # app/views/subjects/create.js.erb
  $('#modalform').modal('hide')
  $("#subject_list").html("<%= escape_javascript( render(:partial => "subjects")) %>");

使用最后一个 escape_javascript 行，我们只是刷新了 subject_list div 并呈现部分“主题” 再次使用更新的@subjects 列表（我们再次在创建操作中重新初始化。） 希望有帮助:)