Beauty in Page Layout


#1

Hi Railers,

I have a model with many associations (20+). I would like to display the
relative associations using AJAX, allowing the user to display the
association his/her is interesting at a particular time. Is there any
existing applications or sample code that I can look at to accomplish
the
task?

Present I have one long page, with master (displaying current record
information) and many details tables (html tables displaying related
associations information). That sucks.

I am thinking that it would be much better User Interface design if the
user
could click on a particular association listings and the info appears
and
dis-appears using the prototype JavaScript library.

Thanks for any suggestions,

Leon


#2

Present I have one long page, with master (displaying current
record information) and many details tables (html tables displaying
related associations information). That sucks.

Yes, it does.

I am thinking that it would be much better User Interface design if
the user could click on a particular association listings and the
info appears and dis-appears using the prototype JavaScript library.

One possibility would be to use tabs. They’re easy to build in CSS;
check out http://www.alistapart.com/articles/slidingdoors/ for an
example. You then set up a

for your content, and replace its
contents with the proper detail inspector using link_to_remote. A
short example:
  • <%= link_to_remote 'Invoices', :url => { :action => 'invoices_with_ajax', :id => my_id_value }, :update => 'content' %>
  • <%= link_to_remote 'Payments', :url => { :action => 'payments_with_ajax', :id => my_id_value }, :update => 'content' %>

When the links are pressed, the rendered results of your actions will
be placed inside the content

. If you’re on Edge Rails, you can
use RJS templates to make it even simpler, but that’s another
question in itself.

-Ben


#3

Ben,

Thank you for you response, it sounds like this can work in my
situation.

I am going to attempt to have two set of tabs on each page with the
inner
tabs using AJAX. I am doing this because i already have outter typo-like
main menu tabs.

Leon.