gmail-like popup checkbox list in rails?

Question

I need to build something like what gmail does for it's labels... It has a button that when pressed pops up a scrolling list displaying the labels with checkboxes for selection.

I'd like to hear about approaches to do the popup and how to place it right under the button.

Also, I'd like to be able to observe the checkbox select/deselect events and take action, so advice on that part would also be appreciated... otherwise, I guess I'll have to put a form with a submit button and handle the new selections when the user submits.

Answer 1

If the checkbox list is static, you can do all this directly in the rendered action. Otherwise, two approaches are possible:

• Use button_to_remote to retrieve an action displaying the popup and also serving the necessary js;

• Use button_to_function to retrieve some XML or json (at your option) from an action, with the necessary labels and values for checkboxes, then render the popup.

The first may be easier to do if you're not familiar with all this, while the second is way more efficient, as only data is passed through the asynchronous call, and not markup nor javascript.

About your last question, if (un)checking the checkbox must result in a server side action, prototype_helper provides a convenient observe_field function, to be used like this:

<%= check_box "foo", "bar" %>
<%= observe_field "foo_bar", :url => {:action => :some_action, :controller => :some_controller} %>

If the (un)checking can be managed on client side, you can simply use:

<%= check_box "foo", "bar", { :onclick => "someFunctionToDoWhatINeed(someArg);"} %>

Just two notes:

• JavascriptHelper and PrototypeHelper are just this, helpers: they allow you to do some things with a very simple syntax and are great, as long as they are helping; when they are no more, feel free to drop them and go for plain javascript.

• I've used prototype for a while, but then I fell in love with jquery; you may want to take a look at it.

Please edit your question or comment my answer if I didn't understand your question and/or was unhelpful.