First post here. Things are looking pretty good in my Rails 3 app:
database is displaying nicely, paginating beautifully with
will_paginate, even CSS formatted. I have, however, been stumped for
days as to how to go about one (probably) simple thing. I have read so
many posts that I now no longer have any idea as to how to implement
this!
Twenty of 1400 data items are displayed at a time; all I want to do is
click on an item and have full details appear in a div at the bottom
of the page. Just like in a default app when you click on a post,
instead of having the detail of an item appear on its own page, I'd
like it to appear in the div below.
I have successfully rendered partials on the page, even in a toggling
div (will use that later), but don't know whether I need to use a
Rails procedure, or prototype, or jquery or what. Sorry to be such a
newbie, but any help would be greatly appreciated. I really have
tried to read about this. Thanks -- Jon .
There are two ways you could do this. Either everything is already on
the page (but hidden), or you fetch stuff from your server on demand.
In the first case all the detail html is rendered in the html, but
with a style that causes it not to be displayed. When you click on an
appropriate bit of the page, you run some javascript that hides
anything currently displayed and displays the bit for the thing just
clicked. You could write all that javascript yourself, but you'd be
mad not to use a library that makes things really easy and covers up
browser specific hacks. Jquery and prototype are two such libraries,
I'd suggest you take a look at the sites for both to see what you like
the look of (Jquery is incredibly nifty for dom manipulation in my
opinion).
In the second case when you click on the appropriate thing, an ajax
request is made to your server which returns the little bit of html
that should be displayed. Rails will give you a leg up here. If you
pass :remote => true to the link_to method (and if you load the
rails.js stuff which provides rails' glue) the clicks on such links
fire off ajax requests. There's a bunch of tutorials about this, one
that turned up high in a google search was
Thanks for that! It's your second case that applies to my problem, so
I'm off to work on your suggestions. Of the seemingly hundreds of
tutorials I had seen, I had not come across the one you mention, which
looks good. Also, one of the jquery tutorials just about does what I
want, so I plan to try jquery and remove prototype from my project.
Thanks again, and I will update later -- Jon.
I figured something out: I don't know how Ajax works! I read elsewhere
to avoid Ajax until you've built an app, and sure enough, this being
my first Rails-powered site, I'm all bogged down adding a 'cool
feature.' I'm reworking an existing site, adding data-driven pages,
and templates and partials are totally reducing my amount of code, and
it's going rather well. This Ajax tangent has gotten me way off track.
New plan: finish rest of site, return to Ajax refinements later. At
least I have my toggle div! Thanks again for the help -- Jon.
