0

I was wondering what the syntax is to link to an attribute on the same page

I have a list of dates

   <ul>
     <% @response.each_pair do |date, movie| %>
      <li><%= link_to date_format(date), date, :class => 'scroll_to' %></li>
     <% end %>
   </ul>

These then have movies underneath each date like so

<% @response.each_pair do |date, movie| %>
    <h3 class="resultTitle fontSize13">Available on&nbsp;<%= date_format(date) %></h3>
    <% movie.each do |m| %>
      <div class="thumbnail clearfix">
        <img class="pull-left" src=<% if m.image_link %> <%= m.image_link %> <% else %> "/assets/noimage.jpg" <% end %>>
        <div class="caption pull-right">
          <%= link_to m.name, m.title_id, :class => 'resultTitle fontSize11' %>
          <p class="bio"><%= m.bio %></p>
          <p class="resultTitle">Cast</p>
          <p class="bio"><%= m.cast.join(", ") unless m.cast.empty? %></p>
          <%= link_to "Remind me", reminders_path(:title_id => m.title_id), :method => :post, :class => 'links button' %>
        </div>
      </div>
    <% end %>
  <% end %>

What i would like to achieve is that when a user clicks on a date in the list then it will take them to that date with movies on the same page

My attribute for each date is

"release_date"

Do i need to link to that, maybe a piece of Jquery aswell to scroll down to that date? or would it jump to the date in one step?

Any advice appreciated, I have linked to other pages before but not the same page like this

EDIT

I have tried this but the page just re renders

<li><%= link_to date_format(date), params.merge(:release_date => 'release_date'), :class => 'scroll_to' %></li>

Am i on the right track?

Thanks

Richlewis
  • 15,070
  • 37
  • 122
  • 283

1 Answers1

1

All you need is to give your date a unique identifier and link to that in you list. For instance below we give the h3 for each date an id relative to the date object. The browser knows how to handle internal links and will simply jump to the corresponding identifier. Notice how the id of the field you're linking to gets appended to the end of the url when you click on the link.

<ul>
   <%- index = 0 %>
   <% @response.each_pair do |date, movie| %>
     <%- index += 1 %> 
     <li><%= link_to date_format(date), "##{index}", :class => 'scroll_to' %></li>
   <% end %>
</ul>
<%- index = 0 %>
<% @response.each_pair do |date, movie| %>
    <%- index += 1 %>
    <h3 class="resultTitle fontSize13" id="<%= index %>">Available on&nbsp;<%= date_format(date) %></h3>
    <% movie.each do |m| %>
      <div class="thumbnail clearfix">
        <img class="pull-left" src=<% if m.image_link %> <%= m.image_link %> <% else %> "/assets/noimage.jpg" <% end %>>
        <div class="caption pull-right">
          <%= link_to m.name, m.title_id, :class => 'resultTitle fontSize11' %>
          <p class="bio"><%= m.bio %></p>
          <p class="resultTitle">Cast</p>
          <p class="bio"><%= m.cast.join(", ") unless m.cast.empty? %></p>
          <%= link_to "Remind me", reminders_path(:title_id => m.title_id), :method => :post, :class => 'links button' %>
        </div>
      </div>
    <% end %>
<% end %>

For the added JQuery transition you can replace

<li><%= link_to date_format(date), "##{index}", :class => 'scroll_to' %></li>

with

<li><%= link_to_function date_format(date), "$('html, body').animate({scrollTop:$('##{index}').offset().top }, 'slow');", :class => 'scroll_to'%></li>

The above isn't exactly a DRY approach, but the important thing to abstract out of that is that you're linking to a unique ID elsewhere on the page and not the code itself.

Noz
  • 6,216
  • 3
  • 47
  • 82
  • thank you for your answer, i have tried as you have stated but get undefined method `id' for "2013-01-09":String – Richlewis Jan 22 '13 at 21:19
  • ok think i have fixed that, now when i hover over link the date is there but nothing happens when i click – Richlewis Jan 22 '13 at 21:28
  • Sorry I thought it was an object at first, if the dates are always going to be unique you can replace `##{date.id}` with `##{date}`. Otherwise you'll have to use an index of some sort, see my updated answer. – Noz Jan 22 '13 at 21:28
  • yes thats what i done when i was getting the first error message, still same problem though nothing happens, sorry to be a pain – Richlewis Jan 22 '13 at 21:30
  • sorry to ask again but how would i reference the id using jquery so that i can scroll to the date, smoother transition – Richlewis Jan 22 '13 at 21:37
  • thanks again, what is <%- index += 1 %> doing and why aren’t we using date anynore? – Richlewis Jan 22 '13 at 21:57
  • You'll have to read my initial comment and re-read my updated answer. Index is just an alternative if the date can't be used (again see my initial comment). Basically it's just a unique identifier that gets incremented. Use date if you want. – Noz Jan 22 '13 at 22:01