Yanis Ismail Yanis Ismail - 2 months ago 5
HTML Question

using data-rel tag, link to a div in dinamically process with Ruby on Rails

I want to do a Facybox, using this method in the tutorial : http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/

The problem is that the "data-rel" tag seems to don't work in dinamically circumstances. here is my code:



<div class="row prod">
<% @type1.each do |product| %>
<div class="product-tile">
<div class="entry col-xs-2 col-xs-offset-0 col-sm-4 col-sm-offset-0 col-md-4 col-md-offset-0 col col-lg-4 col-lg-offset-0 col">
<h3><%= product.title %></h3>
<div class="product_img img-responsive">
<%= image_tag(product.image_url, :class => 'the_img') %>
<a href="#" data-width="1000" data-rel="popup1" class="poplight discover">Discover</a>
<h3><%=product.title%></h3>
<div id="popup1" class="popup_block">
<h3><%=product.title%></h3>
<%= image_tag(product.image_url, :class => 'the_img') %>
<p>Soh Tanaka est traduit sur developpez.com.</p>
</div>
</div>
<div class="product_description">
<%= sanitize(product.description)%>
<div class="price_line">
<span class="price"><%=number_to_currency(product.price)%></span>
</div>
</div>
</div>
</div>
<%end%>
</div>





The <%=product.title%> and <%product.image_url%> gives me always the same result : the first occurrence from my database. how could I fix it?
Thanks!

edit :
my @type1 is just checking the occurence in the "product_line" as you can see:



StoreController < ApplicationController
def index
@products = Product.order(:title)
@type1 = @products.where(:product_line =>"1")
@type2 = @products.where(:product_line =>"2")
end
end




Answer

You can't reuse HTML IDs, so you will have to make sure each popup has a unique id. Try using an index and adding it to the popup's id:

<div class="row prod">
  <% @type1.each_with_index do |product, index| %>
    <div class="product-tile">
      <div class="entry col-xs-2 col-xs-offset-0 col-sm-4 col-sm-offset-0 col-md-4 col-md-offset-0 col col-lg-4 col-lg-offset-0 col">
        <h3><%= product.title %></h3>
        <div class="product_img img-responsive">
          <%= image_tag(product.image_url, :class => 'the_img') %>
          <a href="#" data-width="1000" data-rel="popup<%= index %>" class="poplight discover">Discover</a>
           <h3><%=product.title%></h3>
            <div id="popup<%= index %>" class="popup_block">
               <h3><%=product.title%></h3>
               <%= image_tag(product.image_url, :class => 'the_img') %>
                <p>Soh Tanaka est traduit sur developpez.com.</p>
            </div>
        </div>
        <div class="product_description">
          <%= sanitize(product.description)%>
          <div class="price_line">
            <span class="price"><%=number_to_currency(product.price)%></span>
          </div>
        </div>
      </div>
    </div>
  <%end%>
</div>
Comments