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

Question

我正在努力思考 rails 中的 ajax 表单，并在我的表单上使用 Remote => True。

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

1.form partial 将附加到正文中（其中有表格） 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 并渲染部分 'subject' 再次使用更新的@subjects 列表（我们再次在创建操作中重新初始化。）希望有所帮助:)

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

How do I update my view template once my form is submitted via Ajax in RAILS 4?

jquery

ruby-on-rails

erb