views:

1549

answers:

2

Hi, This is a pretty basic question but I can't find a good answer for it. I have a page in my Rails app where there are many objects that can be 'flagged'. Clicking the flag button should display a little box with a confirmation, little form, etc. The trouble is I can't figure out how to do this using RJS templates.

I've been using page.insert_html but this requires an ID. In order to make this work I had to assign each thing that can be flagged a unique ID. This doesn't seem very clean and still leaves me wondering about making sure only one form can be displayed and that the box disappears on submit. Is there a more simple solution this problem? I essentially want to create something similar to the flag boxes that appear on SO for a flag. Sorry, I'm relatively new to RJS templates. Thanks.

+1  A: 

You could do this with the jquery facebox. This kind of thing is better not done in rjs, but in unobtrusive javascript, that's where everyone is heading these days, it's much cleaner. You can attach the facebox rel to your links, then when clicked it can open the form in a popup window.

Then in your popup window you can do your form and redirect or whatever. The user will be only able to click one as when the pop up window opens an overlay is put over the page so clicking outside it either has no effect or closes the form (I think you choose in the config).

Sounds like the way to go.

railsninja
Great, I noticed there are quite a few lightbox plugins for rails. Do you recommend facebox over the others? I see a few that work with prototype/scriptaculous/nothing that look appealing (such as iBox).
William
I've used a few. This was definately the best. Easy to use and looks good.
railsninja
+1  A: 

jQuery UI also has a Dialog widget that works really well for this sort of thing. It's a nice widget and you can customize your jQuery UI library to include (or exclude if you want a slimmer javascript passed to the browser) other handy widgets as well (accordion, progressbar, etc)

Check out the Dialog examples at jQuery Dialog

revgum