Ajax & Rails

rubyonrails-talk
1

ok - I am trying to do something seemingly straight forward. Essentially I want to list out a bunch of items and for each item individually, if the user clicks on it, the corresponding web link will appear underneath -- if the user clicks on the item again, then the weblink disappears. This should work for each item in the list. I have tried but to no avail - below is a vid clip of what is happening as well as the code that I am using -- any help is greatly appreciated

http://www.screentoaster.com/watch/stU0 … BeQlVeXV5e

(partial _post.html.erb) <h2><%= link_to_remote("#{post.title}", :after => "$('link').next (1).toggle()") %></h2> <div id="link" style="display: none;">   <%= post.link %> </div>

2

ok - I am trying to do something seemingly straight forward. Essentially I want to list out a bunch of items and for each item individually, if the user clicks on it, the corresponding web link will appear underneath -- if the user clicks on the item again, then the weblink disappears. This should work for each item in the list. I have tried but to no avail - below is a vid clip of what is happening as well as the code that I am using -- any help is greatly appreciated

Well by the looks of things you have multiple divs with the same id (never a good) idea, you're using link_to_remote but not actually making an ajax call (link_to_function might be more appropriate) and if my memory is correct and you want to select that link, next() selects siblings whereas it looks like you want to select children (which is what down does)

Fred

3

ok - so I changed the code to the below and getting similar results. What I think is happening is that because it is a partial that is being called (in this example 3 times) but the div is static, it is only updating the first one (i.e. div 1). Is there a way to make a dynamic div? New code below...

<%= link_to_function post.title, "Element.toggle('div 1')" %> <div id="div 1" style="display: none;">   <%= post.link %> </div>

4

never mind - figured it out - the issue was in the div (and made them dynamic through below)...works -- thanks!

<h3><%= link_to_function post.title, "Element.toggle('#{post.title}')" %></h3> <div id="<%= post.title %>" style="display: none;">   <%= post.link %> </div>

5

esdevs wrote:

never mind - figured it out - the issue was in the div (and made them dynamic through below)...works -- thanks!

<h3><%= link_to_function post.title, "Element.toggle('#{post.title}')" %></h3> <div id="<%= post.title %>" style="display: none;">   <%= post.link %> </div>

Just make sure that <%= post.title %> is unique for the page.

Also note that a cleaner solution (assuming "post" is an ActiveRecord subclass) is to use div_for since it will automatically generate a unique id for your div representing your post:

http://www.railsbrain.com/api/rails-2.3.2/doc/index.html?a=M002465&name=div_for

6

<div id="<%= post.title %>" style="display: none;">

Just make sure that <%= post.title %> is unique for the page.

An id must conform to roughly the same rules as a JavaScript identifier. No leading numbers, no spaces, no funny business. Of course no browser bothers to enforce that, but such rules exist to help us Rails programmers write rigorous code that goes far beyond "browser forgiveness".

<div id="post_<%= post.id %>" style="display: none;">

7

Just to complicate things, it was recommended in the past not to use underscores for id and class names because of the css specs. http://devedge-temp.mozilla.org/viewsource/2001/css-underscores/

I don’t think it’s a problem these days but I started to hyphenate in place of underscoring because I noticed my syntax highlighter didn’t like underscores which led me to this whole weird issue.

8

<div id="<%= post.title %>" style="display: none;">

Just make sure that <%= post.title %> is unique for the page.

An id must conform to roughly the same rules as a JavaScript
identifier. No leading numbers, no spaces, no funny business. Of course no browser
bothers to enforce that, but such rules exist to help us Rails programmers
write rigorous code that goes far beyond "browser forgiveness".

<div id="post_<%= post.id %>" style="display: none;">

Or use the div_for helper

Fred

9

Brilliant on all accounts - thanks guys!!

sean

10

Frederick Cheung wrote:

<div id="post_<%= post.id %>" style="display: none;">

Or use the div_for helper

(Didn't know that! But..) sometimes it ain't a div. you can twiddle the innards of a span or table or li. Not to say you _should_...