# Beauty in Page Layout

**URL:** <https://www.ruby-forum.com/t/beauty-in-page-layout/51405>\
**Category:** Rails\
**Created:** [December 30, 2005, 10:39pm UTC](https://www.ruby-forum.com/t/beauty-in-page-layout/51405 "2005-12-30T22:39:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![scorpio\_leon](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/c2a13f/32.png) [@scorpio\_leon](https://www.ruby-forum.com/u/scorpio_leon)\
**Post date:** [December 30, 2005, 10:39pm UTC](https://www.ruby-forum.com/t/beauty-in-page-layout/51405/1 "2005-12-30T22:39:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![scorpio\_leon](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/c2a13f/32.png) [@scorpio\_leon](https://www.ruby-forum.com/u/scorpio_leon)\
**Post date:** [December 31, 2005, 12:58am UTC](https://www.ruby-forum.com/t/beauty-in-page-layout/51405/2 "2005-12-31T00:58:37Z")

</div>

> 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 [Sliding Doors of CSS – A List Apart](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

---

<div class="post-metadata">

**Author:** ![scorpio\_leon](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/s/c2a13f/32.png) [@scorpio\_leon](https://www.ruby-forum.com/u/scorpio_leon)\
**Post date:** [December 31, 2005, 1:33pm UTC](https://www.ruby-forum.com/t/beauty-in-page-layout/51405/3 "2005-12-31T13:33:42Z")

</div>

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.