Refresh Rails Partial with AJAX or JS

Question

Im working on a rails application and I have a few form partials that I am rendering in tabs.

I want to be able to submit a form, and refresh the form inside the tab, as well as update the other forms, without refreshing the page.

Here is how my application looks:

This is the show page for my controller tape_bulk_coc . The primary code for this page is the following:

<div class="large-12 columns large-collapse" style="padding-top: 2%; padding-left: 5%; padding-right: 5%">
  <div class="large-2 columns">
    <ul class="tabs vertical" id="example-vert-tabs" data-tabs>
      <li class="tabs-title" id="job_links"><a href="#panel1v" aria-selected="true">Job Information</a></li>
      <li class="tabs-title" id="job_links"><a href="#panel2v">Lab/Insp/Clr Work</a></li>
      <li class="tabs-title" id="job_links"><a href="#panel3v"><%= @tape_bulk_coc.cli_type.job_type.job_type %> Types</a></li>
      <li class="tabs-title is-active" id="job_links"><a href="#panel4v">Add Samples</a></li>
      <% if @tape_bulk_coc.tape_bulk_coc_samples.any? %>
        <li class="tabs-title" id="job_links"><a href="#panel5v"> <%=@tape_bulk_coc.tape_bulk_coc_samples.count %> Saved Samples </a></li>
      <% end %>
      <li class="tabs-title" id="job_links"><a href="#panel6v">Add Spore Counts ( <%= @missing_spore_count.count %> )</a></li>
      <li class="tabs-title" id="job_links"><a href="#panel7v">CoC Reports</a></li>
      <li class="tabs-title"><a href="#panel8v">New Job</a></li>
      <li class="tabs-title"><a href="#panel9v">All Jobs</a></li>
      <li class="tabs-title"><a href="#panel10v">All Reports</a></li>
    </ul>
  </div>
  <div class="large-10 columns">
    <div class="tabs-content vertical" data-tabs-content="example-vert-tabs">
      <div class="tabs-panel" id="panel1v" style="border-left: solid 1px #f2f2f2">
        <%= render 'jobs/show' %>
      </div>
      <div class="tabs-panel" id="panel2v" style="border-left: solid 1px #f2f2f2">
        <%= render 'jobs/jobtypes' %>
      </div>
      <div class="tabs-panel" id="panel3v" style="border-left: solid 1px #f2f2f2">
        <%= render 'job_types/show' %>
      </div>
      <div class="tabs-panel is-active" id="panel4v" style="border-left: solid 1px #f2f2f2">
        <%= render 'tape_bulk_cocs/show' %>
        <hr>
        <%= render 'tape_bulk_coc_samples/form' %>
      </div>
      <div class="tabs-panel" id="panel5v" style="border-left: solid 1px #f2f2f2">
        <%= render 'tape_bulk_cocs/samples' %>
      </div>
      <div class="tabs-panel" id="panel6v" style="border-left: solid 1px #f2f2f2">
        <%= render 'spore_type_counts/form' %>
      </div>
      <div class="tabs-panel" id="panel7v" style="border-left: solid 1px #f2f2f2">
         <!-- render 'lead_reports/index' %> -->
      </div>
      <div class="tabs-panel" id="panel8v" style="border-left: solid 1px #f2f2f2">
        <%= render 'jobs/form' %>
      </div> 
      <div class="tabs-panel" id="panel9v" style="border-left: solid 1px #f2f2f2">
        <%= render 'jobs/index' %>
      </div> 
      <div class="tabs-panel" id="panel10v" style="border-left: solid 1px #f2f2f2">
        <%= render 'all_reports/index' %>
      </div>
    </div>
  </div>

When the page loads/refreshes, this is the tab that is set to be active.

The form that I want to refresh on submit is in the tab "Add Spore Counts":

When you click the button to "Add Mold Spore Count" a modal window appears that contains the form data and submit button. This submits to the controller for spore_type_counts

Currently, after the user submits inside that modal, it closes, and the page refreshes back to the active tab of "Add Samples".

What I want is no page refresh, and have the modal close, and only the contents of the "Add Spore Counts" to update. Meaning, if they add a spore count to Sample 69-3, then it will no longer be displayed on that tab, and only the other two samples will remain.

UPDATE

So, I followed some instructions here: https://coderwall.com/p/kqb3xq/rails-4-how-to-partials-ajax-dead-easy

The page I'm working on is the show page for the tape_bulk_coc controller.

On this page I am rendering the spore_type_counts/form inside one of my tabs.

The spore_type_counts/form , in short, looks like this:

<div id="test">
   <% if @tape_bulk_coc.tape_bulk_coc_samples.any? %>
      <% @tape_bulk_coc.tape_bulk_coc_samples.each do |cur| %>
         <% if !cur.spore_type_count %>
            <div class="reveal" data-reveal>
               <%= form_for(@spore_type_count, remote: true) do |f| %>
                  "code for the form"
               <% end %>
            </div>
         <% end %>
      <% end %>
   <% end %>
</div>

spore_type_counts_controller.rb

  def create
    @spore_type_count = SporeTypeCount.new(spore_type_count_params)

    respond_to do |format|
      if @spore_type_count.save
        format.js
      end
    end
  end

app/views/spore_type_counts/create.js.erb

$("#test").html("<%= escape_javascript(render partial: 'spore_type_counts/form' ) %>");

When I submit the form, everything gets submitted and updated properly in the database. The response comes through as JS, the spore_count gets added to the CoC properly, but the modal does not close, and the page does not get updated.

This is the response I see from the server:

The line NoMethodError - undefined method tape_bulk_coc_samples' for nil:NilClass: app/views/spore_type_counts/_form.html.erb:12: is what I now need help with.

If I'm understanding it correctly, the first time I come to this page, my tape_bulk_cocs_controller is populating the @tape_bulk_coc object from the params. I am using this object inside my spore_type_counts/form , but when it tries to call the JS function to refresh the partial, that object is no longer there, and I'm getting an error when it hits my first if conditional inside the form.

So, how can I get this object and pass it back to the partial in order to make it all work?

Answer 1

You are missing something. plz add format.js { something here } in code and then add a file actionname.js in controller folder(spore_type_counts yours folder). then add a alert line in js code for test. keep in mind if no format.js line is there server will perform as HTML action. just check server side log that it will surly adding as JS action if you are using remote true. Hope