visual_effect

rubyonrails-talk
1

Hello,

I try to make a visual effect "toggle" on a list generated automatically from a controller, I've tried this but that doesn't work? the id "answer_<%=i%> isn't recognized I think?

<%i=0%> <%@questions.each do |question|%> <h1 class="question">   <%= link_to_function(question.description) do |page|        page.visual_effect :toggle_appear, 'answer_<%=i%>'             end%> </h1>

<p id="answer_<%=i%>">   <%=question.answer%> </p> <%i=i+1%> <%end%>

Thank you for your help,

2

Hello,

I try to make a visual effect "toggle" on a list generated
automatically from a controller, I've tried this but that doesn't work? the id "answer_<%=i%> isn't recognized I think?

<%i=0%> <%@questions.each do |question|%> <h1 class="question"> <%= link_to_function(question.description) do |page|       page.visual_effect :toggle_appear, 'answer_<%=i%>'            end%> </h1>

When you call page.visual_effect you're not in erb-land, so you need
"answer_#{i}"

Fred

3

thank you Fred,

I've changed so this in my code but that works only for the first title; if I click on another title, it's always the description of the first title that disappears/appears? I would like to make a appearition/disappearition of the description linked to the title concerned.

  <%i=0%>   <%@questions.each do |question|%>   <h1 class="question">     <%= link_to_function(question.description) do |page|           page.visual_effect :toggle_appear, 'answer_#{i}'             end%>   </h1>

  <p id="answer_#{i}">     <%=question.answer%>   </p>   <%i=i+1%>

4

Hi,

<%i=0%> <%@questions.each do |question|%> <h1 class="question"> <%= link_to_function(question.description) do |page| page.visual_effect :toggle_appear, 'answer_#{i}' end%> </h1>

<p id="answer_#{i}"> <%=question.answer%> </p> <%i=i+1%>

You've nearly got it, but you're confusing ERB scope and ruby scope. Also strings surrounded with single quotes in ruby don't get interpolated, you need double quotes.

Finally you don't need your index variable i when you could use each_with_index instead.

  <%@questions.each_with_index do |question, i| %>     <h1 class="question">       <%= link_to_function(question.description) do |page|           page.visual_effect :toggle_appear, "answer_#{i}"        end %>     </h1>

    <p id="answer_<%=i%>">       <%=h question.answer%>     </p>   <% end %>

5

This could arguably be simplified even further with the content_tag_for and dom_id methods. Something like this (untested):

<% @questions.each do |question| %> <% content_tag_for :h1, question do link_to_function(question.description) do |page| page.visual_effect :toggle_appear, dom_id(question, "answer") end      end %>

 &lt;% content\_tag\_for :p,  question, &quot;answer&quot; do %&gt;
   &lt;%=h question\.answer%&gt;
 &lt;% end %&gt;

<% end %>

Search the Rails API docs for dom_id and content_tag_for.

6

check the source to make sure it looks as you'd expect it to.