Ajax Toggle Bar

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

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:

Features & Benefits

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?


Phlip
Test Driven Ajax (on Rails) [Book]
“Test Driven Ajax (on Rails)”
assert_xpath, assert_javascript, & assert_ajax

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