在RAILS 4中通过Ajax提交表单后，如何更新视图模板? [英] How do I update my view template once my form is submitted via Ajax in RAILS 4?

问题描述

我试图将我的头绕在ajax表单中，并在表单上使用Remote => True.

I am trying to wrap my head around ajax forms in rails and using Remote => True on my forms.

现在这有效，当我单击添加新主题"时.将发生以下情况

Now this works, When I click on Add New Subject. The following will happen

1.form部分将被附加到主体(其中具有形式) 2.Bootstrap Modal将显示在里面的表格 3.单击提交"后，模态将消失，数据将被存储(成功)

1.form partial will be appended to the body(this has the form in it) 2.Bootstrap Modal will show up with the form on the inside 3. Once I click Submit, the modal will go away, and the data will be stored(success)

我的问题是，原来的Index.html.erb视图现在已过时，因为将数据插入到我的数据库中，该视图仍然显示旧数据.

My problem is that the original Index.html.erb view is now stale, as the data is inserted into my database, the view still shows the old data.

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

How do I trigger my view to update once the form has been successful submitted via ajax?

谢谢！

我的subject.rb控制器

My subject.rb controller

  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

my new.js.erb

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

我的create.js.erb

my create.js.erb

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

推荐答案

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

Let's refactor your index file code and place the @subjects in another partial. Because, after the create action we need to refresh a specific div with updated subjects list.

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

现在，使用此部分内容来保存您的主题列表:

Now, use this partial to hold your subjects listing :

 #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 %>

现在，在执行create动作之后，您需要刷新加载的数据. 您当前在索引页面中.

Now, after your create action is executed you need to refresh the loaded data . You are currently in the index page.

您需要执行此操作:

# 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)

Now in your create.js.erb file you need to refresh the particular div, which basically holds the subject listing section(#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列表(我们在create action中再次进行了初始化.) 希望能有所帮助:)

With the last escape_javascript row, we are just refreshing the subject_list div & rendering the partial 'subject' again with the updated @subjects list(we reinitialized in create action again.) Hope that helps :)

这篇关于在RAILS 4中通过Ajax提交表单后，如何更新视图模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！