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

Question

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

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.

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

Thanks!!

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

here is my index view

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

my new.js.erb

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

my create.js.erb

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

Answer 1

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

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

You need to do this :

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

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")) %>");

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