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:


  
    
      Job Information
      Lab/Insp/Clr Work
      <%= @tape_bulk_coc.cli_type.job_type.job_type %> Types
      Add Samples
      <% if @tape_bulk_coc.tape_bulk_coc_samples.any? %>
         <%=@tape_bulk_coc.tape_bulk_coc_samples.count %> Saved Samples 
      <% end %>
      Add Spore Counts ( <%= @missing_spore_count.count %> )
      CoC Reports
      New Job
      All Jobs
      All Reports
    
  
  
    
      
        <%= render 'jobs/show' %>
      
      
        <%= render 'jobs/jobtypes' %>
      
      
        <%= render 'job_types/show' %>
      
      
        <%= render 'tape_bulk_cocs/show' %>
        
        <%= render 'tape_bulk_coc_samples/form' %>
      
      
        <%= render 'tape_bulk_cocs/samples' %>
      
      
        <%= render 'spore_type_counts/form' %>
      
      
         
      
      
        <%= render 'jobs/form' %>
       
      
        <%= render 'jobs/index' %>
       
      
        <%= render 'all_reports/index' %>

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:


   <% if @tape_bulk_coc.tape_bulk_coc_samples.any? %>
      <% @tape_bulk_coc.tape_bulk_coc_samples.each do |cur| %>
         <% if !cur.spore_type_count %>
            
               <%= form_for(@spore_type_count, remote: true) do |f| %>
                  "code for the form"
               <% end %>
            
         <% end %>
      <% end %>
   <% end %>

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?

Refresh Rails Partial with AJAX or JS

Answers (1)

Related Questions