Ajax Toggle Bar

rubyonrails-talk
1

Hi Everybody,

I am new to Ajax and wondering if it is possible to create Ajax component like following link in Rails. I am not sure how to call this kinds of widgets. It shows bars which you can dynamically show and hide. This seems very useful to save screen space.

http://quicken.intuit.com/personal-finance/basic-personal-budget.jhtml

Could anyone point me what is the best way to write this kind of components or anything I need to know?

Thanks, Glenn

2

Glenn wrote:

I am new to Ajax and wondering if it is possible to create Ajax component like following link in Rails. I am not sure how to call this kinds of widgets. It shows bars which you can dynamically show and hide. This seems very useful to save screen space.

http://quicken.intuit.com/personal-finance/basic-personal-budget.jhtml

Could anyone point me what is the best way to write this kind of components or anything I need to know?

Get Firebug, open that page with Firefox, distend the context menu for one of those bars (the right-click-mouse-button-menu), and inspect the element:

<a onclick="infoToggle('1'); return false;" href="#"><span title="Features & Benefits">Features & Benefits</span></a>

Now look up infoToggle, in Firebug's script panel:

function infoToggle(num) { infoOffID = "info-"+num; infoOnID = "info-on-"+num; if (document.getElementById(infoOffID).className == "off") { document.getElementById(infoOffID).className = ""; document.getElementById(infoOnID).className = "off"; if (num == "all") { for (i=1; document.getElementById("info-on-"+i); i++) { document.getElementById("info-on-"+i).className = "off"; document.getElementById("info-"+i).className = ""; } else { document.getElementById(infoOffID).className = "off"; document.getElementById(infoOnID).className = ""; if (num == "all") { for (i=1; document.getElementById("info-on-"+i); i++) { document.getElementById("info-on-"+i).className = ""; document.getElementById("info-"+i).className = "off"; } }

I'm not sure if I agree with the style. All the variables need 'var ' before them. And FireBug wrecked the indentation.

Note that the code uses no Ajax. It just shows and hides DIVs based on their IDs. It switches between a visible and invisible class, "off", and this class probably says display:none inside. Ajax is more complex - it fetches new data from a server, and slips it into the page. This page just uses the common technique of sending out much more information than you see, and "accordioning" it when you need it.

New question to the group: What is the JavaScriptGenerator way to do all that?

3

Hi Philip,

Thank you so much for your replay. I have never thought it is a plain JavaScript. Anything looks cool appears Ajax to me. I did little more research based on your suggestion and following page.

http://wiki.rubyonrails.com/rails/pages/HowtoUseElement

It seem Element.toggle is the one I need to use in Rails.

Thank you, Glenn