Hide/Show Div and link_to_remote

rubyonrails-talk
1

Hi

I want to show some info and provided an 'edit' button next to it. This will change the display info to an editable form.

I've seen this done before, but what I can't figure out is whether I have to use an actual remote action to the rails server?

I think I should be able to render both the edit box and the display info as seperate divs, and then show/hide them based on clicks. I have this working with link_to_remote and an rjs file with page.show and page.hide, but this requires each click to have communication with the server.

What I'm wondering is whether this can be done without making the query to the server? Basically pure javascript with no server ping?

2

Hi

I want to show some info and provided an 'edit' button next to it. This will change the display info to an editable form.

Have a google for "rails in-place editor" and feast on the many links. But be sure to look for one that works on your version of Rails.

I've seen this done before, but what I can't figure out is whether I have to use an actual remote action to the rails server?

You do if you expect to persist the result of the edit. The initial form will load up with the HTML from the page itself, so no lookup needed to get started.

Walter

3

Thanks for the reply.

I know I'll need a call to the server to save the changes. I guess I meant do I need a call to the server to show/hide divs? Right now the only way I know how to do it is use link_to_remote for an AJAX action. That AJAX action does nothing but call a rjs template with page.show or page.hide.

It seems like if I'm just doing page.hide/show I should be able to do that without a call to the server?

Lets ignore the 'editable' form part. In general how would I hide/ show a div on a button click for instance?

4

Use javascript. This is not really a Rails issue. I suggest finding some tutorials on javascript.

Colin

5

If you have prototype.js in your page (Rails default) then you just do this in JavaScript:

$('elementId').hide();

or

$('elementId').show();

I don't think there are (ore need to be) Rails helpers for these...

Walter

6

Lets ignore the 'editable' form part. In general how would I hide/ show a div on a button click for instance?

In addition to what Walter mentioned there is the 'toggle' function: http://api.prototypejs.org/dom/Element/toggle/

7

Maybe you can see to it by simply changing the style of your edit div from "display:none" to "display:block" using a simple javascript function if you don't like using javascript libraries.

8

Yes, but I think toggling is better solution. Alternatively you can include another JavaScript library, I suggest script.aculo or jQuery. http://madrobby.github.com/scriptaculous/effect-fade/

If you want to AJAXify first do everything without it. As soon as it works you can change part by part to AJAX. Use Firebug to try out every CSS modification first without changing the code, and see if any JS bug occurs, any you can use selenium too.

good luck gezope