gmail-like popup checkbox list in rails? - ruby-on-rails

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.

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.

Related

Rails 3.0 . How to pass the select box value through link_to

I knew that Rails3 no longer supporting link_to_remote.... instead of that we can modify
the link_to method by using different syntax as follows :
link_to "Send",{:action =>"send_mail",:question_id =>question.id},:remote => true,:class =>"button small"
My problem is, in my view i keep the select box which contains the list of user's name near by send link button (which user the above syntax)... i want to pass the selection box value to link_to when user click the send button
Here is my View code :
"send_mail",:question_id =>question.id,:user_value
=>encodeURIComponent($F('user_id'))},:remote => true,:class =>"button small" %>
I don't know how to achieve this ....can any one please suggest me on this.
edit: ok now is see your last comment... never mind
What I got from the question, you are looking for something like this:
http://marcgrabanski.com/articles/jquery-select-list-values
It's not really a Rails problem since you can't change the Ruby code from within the rendered HTML (at least that would be very risky if it's possible). The code from above can be easily changed to your needs so that the user gets redirected to the URL that matches the button value.

How to create one form with many possible actions in Rails?

I want to create one form with 2 buttons in rails. Both forms operate on the same data in different ways, and I would prefer to keep the associated functionality in two different methods. Previously I've redirected to the appropriate method after doing a string comparision on params[:commit], but my gut says there's a better approach. Suggestions?
Two different submit buttons that send the form to two different actions:
<%= submit_tag('Insert', :onclick=>"document.myForm.action = 'insert';") %>
<%= submit_tag('Update', :onclick=>"document.myForm.action = 'update';") %>
Instead of "myForm" you need to put whatever is in the "name" property of your tag.
You can set that property in your default form:for tag like this:
<%= form_for(#something, :html => {:name => "myForm"}) do |f| %>
Without using JavaScript, your only solution is what you mention: checking which button was clicked by looking at the POST data in the controller. This is simply due to the nature of the HTML form element. It cannot have more than one value for its action attribute.
If you're not worried about what will happen when JavaScript isn't available, then you can write some script to change the action attribute when one of the submit buttons is clicked, prior to actually submitting the form. In the case of an ajax request, it could simply submit to the correct URL directly without altering attributes on the form.
I also used the params[:commit] method on a form already. Using the I18n helpers makes this a bit less fragile as you can use the same lookup in the view and controller, so you don't encounter the problem that the string changes a bit.
Besides that I can only think of using JavaScript to handle the clicks on the buttons and then send the form data to different Rails actions (Maybe you can change the HTML action attribute of the form with JavaScript before you submit the form).
If you're using prototype.js, you can use Form.serialize() to grab your data from your form and from there use the different buttons to post to different actions.

MVC DropDownList SelectedItem Value in ActionLink

I'm a bit confused and sorry if this question is repeated elsewhere, I did check and it didnt seem to be here yet.
Is there a way, (without use of JavaScript) to get the currently selected item of a DropDownList and say send it off to an ActionLink?
<%= Html.DropDownList("Elements") %>
<%=Html.ActionLink("Add Authorization Element", "AddElement", new {elementGuid = ??? }) %>
The bit I am looking for is something to replace:
???
Thanks,
Ric
Not without JavaScript, no. Of course, it's trivial with JavaScript.
If you want to do both, add JavaScript to the drop down, then put a submit button inside a noscript tag. Users without JavaScript will have to click the button. Users with JavaScript won't see it.

rails form_remote_tag and onselect submit

I have a form_remote working perfectly for the form currency. The only change I want to make is the do away with submit button for a select box. So they just click the correct currency and it submits the ajax request.
<%= collection_select(:currency, :set, Currency.find(:all, :conditions => 'primary_source = "ECB"'), :code, :pretty_name, { :selected => session[:currency] }, { :onchange => "$('currency').submit()" } ) %>
The onchange works for the select, but instead of using the remote ajax request, it refeshes the entire page... instead of just one element, how can I initiate the remote_tag so that it does the same thing clicking submit would?
The problem you're having is that Rails implements remote_form_for as an inline Ajax method in the onsubmit attribute of the form. The problem is that the submit event only fires when a user physically submits the form, not by calling $('form').submit(). Actually I believe some browsers may fire the event but others don't. In any case, this won't work in the general case as you discovered.
One possible workaround, and I have only tested this in Firefox 3.5, so your mileage may vary, is to call the attribute as a function directly. So inside your :onchange put:
$('currency').onsubmit()
If that doesn't work you may need to look at the generated source, and pull the AJAX request out of the onsubmit attribute and into a standalone method that you can call directly.
As far as I know there is no cross-browser way to reliably fire a native event.

can link_to lead to rendering sth?

i want to render a partial within a view. so that when button MORE is clicked everything stays the same just additional characters are shown. in my case the whole article.
<%= #article1.content[0..300] + "..." %>
<%= link_to "more", ....... %>
i dont know what the right methot would be. somehow i have to explain to rails that when button more is clicked it shows me the whole article. maybe i shouldn't use method link_to ..
thank you in advance for your replys
What you're looking for is link_to_remote or link_to_function.
link_to_remote will be fetching the rest of the article from your controller and replacing/appending to a DOM element with a partial via RJS. This allows you to minimize unnecessary data being sent, and facilitates handling users that have javascript disabled.
With link_to_function, the entire article will be served when the page is loaded, but the everything beyond the first 300 characters will be hidden by CSS. This is easier to set up but sends a lot more data, it also relies on the user having javascript enabled.
Without looking at the source the average user probably couldn't distinguish between the two methods.
Which choice you go with is up to you. Sorry, I haven't got time to provide code examples, but the internet is full of them.
try link_to_function, use truncate for part and insert hidden tag with full text, switch them using javascript in link_to_function

Resources