CODEWITHSUNDEEP
javascriptjqueryruby-on-rails-5
Jeremy Bray
Jeremy Bray

Reputation: 444

Rails looping in Partial

Hi I am currently running a loop in a partial for my collections model like so:

product/show.html.erb

<div class="card card-block">
   <%= render partial: 'products/collects', locals: {product: @product} %>
</div>

Partial _collects.html.erb

<% current_user.collections.each do |collection| %>
    <div class="row">
      <div class="col-lg-6 d-flex justify-content-start">
        <h4><%= collection.name %></h4>
      </div>
      <div id="collection_<%= collection.id %>_<%= product.id %>_collects">
        <% if collection.collects?(product) %>
            <%= link_to product_collect_path(product.id, collection_id: collection.id), method: :delete, remote: true, id: 'remove-button' do %>
                <i class="fa fa-times" data-toggle='tooltip' data-placement='top' title='Remove this Product'></i>
            <% end %>
        <%- else -%>
            <%= link_to product_collect_path(product.id, collection_id: collection.id), method: :post, remote: true, id: 'collects-button' do %>
                <i class="fa fa-plus" data-toggle='tooltip' data-placement='top' title='Collect this Product'></i>
            <% end %>
        <% end %>
      </div>
    </div>
<% end %>
<br>
<div  class="row">
  <%= link_to 'Create new Collection', new_collection_path, class: 'btn btn-secondary btn-block' %>
</div>

this works great, except when I want to target the div below with js:

<div id="collection_<%= collection.id %>_<%= product.id %>_collects">

Is there a way to run the loop and only have the following inside the partial

<div id="collection_<%= collection.id %>_<%= product.id %>_collects">
        <% if collection.collects?(product) %>
            <%= link_to product_collect_path(product.id, collection_id: collection.id), method: :delete, remote: true, id: 'remove-button' do %>
                <i class="fa fa-times" data-toggle='tooltip' data-placement='top' title='Remove this Product'></i>
            <% end %>
        <%- else -%>
            <%= link_to product_collect_path(product.id, collection_id: collection.id), method: :post, remote: true, id: 'collects-button' do %>
                <i class="fa fa-plus" data-toggle='tooltip' data-placement='top' title='Collect this Product'></i>
            <% end %>
        <% end %>
      </div>

or is it better to update the below js and target the div, not the partial?

products/collects/create.js.erb

$('#collection_<%= @collection.id %>_<%= @product.id %>_collects').html("<%=j render partial: 'products/collects', locals: {product: @product} %>");

UPDATE

I found a couple of other questions that lead me down the rabit hole of the partial and rendering loops. specifically this and the docs

by adding a second local and an object for the collections like so

<%= render partial: 'products/collects', locals: {product: @product, collection: collection}, object: collection %>

I was able to show the page without a no method error, but it shows like so

what have I done wrong?

Upvotes: 1

Views: 649

Answers (1)

Jeremy Bray
Jeremy Bray

Reputation: 444

I found that by rendering the partial inside the collection loop like so

 <% @collections.each do |collection| %>
          <%= collection.name %><
<%= render partial: 'products/collects', locals: {product: @product, collection: collection} %>    
    <% end %>

and setting up my partial like so:

<div id="collection_<%= collection.id %>_<%= product.id %>_collects">
  <% if collection.collects?(product) %>
      <%= link_to product_collect_path(product.id, collection_id: collection.id), method: :delete, remote: true, id: 'remove-button' do %>
          <i class="material-icons">subtract</i></i>
      <% end %>
  <%- else -%>
      <%= link_to product_collect_path(product.id, collection_id: collection.id), method: :post, remote: true, id: 'collects-button' do %>
          <i class="material-icons">add</i>
      <% end %>
  <% end %>
</div>

I was able to run my loop and render the partial. In my initial locals call I had missed the collection: collection. I recommend going down the rabbit hole of the partial and rendering loops, as mentioned in my update.

Upvotes: 1

Related Questions