Rails Ajax Requests

Question

Can anyone assist with this problem please. I'm trying to do a AJAX request with Rails but keep on receiving this error message.

ActionView::Template::Error (Missing partial client_sub_folders/_client_sub_folder with {:locale=>[:en], :formats=>[:js, :html], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :arb, :coffee, :jbuilder]}.

Please see code below. I'm simply trying to add to the list of items on the show page while staying on the same page without a page refresh. client_sub_folders is a nested resource within client_folders in case that makes a difference. Thanks!

create.js.erb

$("#new_client_sub_folder").remove();
$("#new_collection").show();
$("#item_list").append("<%= j render(@client_sub_folder) %>");

client_sub_folder_controller.rb

  def create
    @client_sub_folder = @client_folder.client_sub_folders.new(client_sub_folder_params)

    respond_to do |format|
      if @client_sub_folder.save
        format.html { redirect_to client_folder_client_sub_folder_path(@client_folder, @client_sub_folder), notice: 'Client sub folder was successfully created.' }
        format.json { render :show, status: :created, location: client_folder_client_sub_folder_path(@client_folder, @client_sub_folder) }
        format.js {}
      else
        format.html { render :new }
        format.json { render json: @client_sub_folder.errors, status: :unprocessable_entity }
        format.js {}
      end
    end
  end

new.js.erb

$("#new_collection").hide().after("<%= j render('form') %>");

_form.html.erb (for client_sub_folders)

    <%= form_for([@client_folder, @client_sub_folder], remote: true) do |f| %>
      <% if @client_sub_folder.errors.any? %>
        <div id="error_explanation">
          <h2><%= pluralize(@client_sub_folder.errors.count, "error") %> prohibited this @client_sub_folder from being saved:</h2>

          <ul>
          <% @client_sub_folder.errors.full_messages.each do |message| %>
            <li><%= message %></li>
          <% end %>
          </ul>
        </div>
      <% end %>
      <%= f.label :room_name %>
      <%= f.text_field :room_name, required: true %>

      <div class="actions">
        <%= f.submit %>
      </div>
    <% end %>

show.html.erb (client_folders)

<div class="container">
    <div class="row">
        <p id="notice"><%= notice %></p>
        <h1> <%= @client_folder.client_name %> Collection </h1>

            <table>
              <thead>
                <tr>
                  <th colspan="3">Col A</th>
                  <th colspan="3">Col B</th>
                  <th colspan="3"> Col C </th>
                  <th colspan="3"> Col D </th>
                </tr>
              </thead>

                          <tbody>

              <%= render partial: "client_sub_folders/client_sub_folder" %>

          </tbody>
            </table>
            <%= link_to 'Create Client Collection', new_client_folder_client_sub_folder_path(@client_folder), class: "btn btn-success", id: "new_collection", remote: true %><br>


        <%= link_to 'Back to Client Folders', designer_client_folders_path(current_designer) %>
    </div>
</div>

_client_sub_folder.html.erb

<% @client_folder.client_sub_folders.each do |sub| %>
<tr id="item_list">
                    <td colspan="3"> <%= sub.room_name %> <%= link_to "(edit)", edit_client_folder_client_sub_folder_path(@client_folder, sub)  %> </td>
                    <td colspan="3"> <%= sub.images.count unless sub.images.nil? %> </td>
                    <td colspan="3"><%= link_to 'Add / Remove', client_folder_client_sub_folder_path(@client_folder, sub) %></td>
                    <td colspan="3"><%= link_to 'Delete Collection', client_folder_client_sub_folder_path(@client_folder, sub), method: :delete, data: { confirm: 'Are you sure?' } %></td>
                  </tr><% end %>

Answer 1

You are trying to do this:

$("#item_list").append("<%= j render(@client_sub_folder) %>");

so the render(@client_sub_folder) needs a partial named _client_sub_folder in client_sub_folders/_client_sub_folder so that it can show the details directly.

In the partial _client_sub_folder you can put the code like this:

<tr>
   <td colspan="3"> <%= client_sub_folder.room_name %> <%= link_to "(edit)", edit_client_folder_client_sub_folder_path(client_sub_folder.client_folder, client_sub_folder)  %> </td>
   <td colspan="3"> <%= client_sub_folder.images.count unless sub.images.nil? %> </td>
   <td colspan="3"><%= link_to 'Add / Remove', client_folder_client_sub_folder_path(client_sub_folder.client_folder, client_sub_folder) %></td>
   <td colspan="3"><%= link_to 'Delete Collection', client_folder_client_sub_folder_path(client_sub_folder), method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>

And after creating the partial you can also change show.html.erb where you are doing this (looping on client sub folders and displaying the details):

<tbody id="item_list">
  <% @client_folder.client_sub_folders.each do |sub| %>
    <tr>
      <td colspan="3"> <%= sub.room_name %> <%= link_to "(edit)", edit_client_folder_client_sub_folder_path(@client_folder, sub)  %> </td>
      <td colspan="3"> <%= sub.images.count unless sub.images.nil? %> </td>
      <td colspan="3"><%= link_to 'Add / Remove', client_folder_client_sub_folder_path(@client_folder, sub) %></td>
      <td colspan="3"><%= link_to 'Delete Collection', client_folder_client_sub_folder_path(sub), method: :delete, data: { confirm: 'Are you sure?' } %></td>
    </tr>
  <% end %>
</tbody>

You can change the above and do it like this:

<tbody id="item_list">
  <%= render partial: "client_sub_folder", collection: @client_folder.client_sub_folders %>
</tbody>

And after this your line of code:

$("#item_list").append("<%= j render(@client_sub_folder) %>");

will also work and not throw exception.

More Details: PartialRenderer

Hope this helps.