Topic: Update page content based on menu selection

Hello people,

In one of my views I have a drop down menu that goes like this:

<%= select_tag :name, options_for_select(@names) %>

@names is an array created in my controller and lets say it contains [John, George, Bill].

My problem is that I need to display, lets say John's attributes, as soon as the user clicks on him right under the menu box.

My thoughts are on the line of an onClick event that will somehow take the selection, send it back to the controller, query the database and then come back to the view and display them. Is this possible? Can you give a simple example of javascript - controller interaction? (Yes I'm clueless on javascript).

All the solutions I found googling around, for dynamic update of the page content, where static (hardcoded), but my data's size is prohibitive to a static solution.

For convenience lets say the database contains

name:         John | George | Bill
attribute1:   20   | 30        | 26
attribute2:  1.68 | 1.8       | 1.76
attribute3:   70   | 90        | 100

P.S.: Hope this is the correct section of the forum:)

Thank you.

Last edited by avlach (2012-02-11 01:45:47)

Re: Update page content based on menu selection

The documentation for Rails and AJAX/UJS is horrible. But this is how I would do it. I've not tested it, but hopefully this will either work or guide you in the right direction. Let me know if you have questions.

Here are the steps. I would provide code, but I would pretty much be writing the entire thing. So let's try to avoid that for now.

Step 1. /assets/javascript/you_controller_js_file.js. Add some jQuery in there that will detect the change of your select box. Add $.ajax to call your User's view page. (would be something like /users/4 where 4 is the ID). Return the data of the ajax call to the div of your choice on the page.

Step 2. Inside of /controllers/users_controller.rb, in the show method, add

format.js   { render :partial => 'your/view/directory/ajax_userinfo', :locals => {:user => @user}, :content_type => 'text/html' }

Step 3. Create a view file inside of /your/view/directory/_ajax_userinfo.html.erb. Use this file to create what should be loaded from the AJAX. You can use the user variable passed from the controller in step 2.

That should work smile There are other ways to do this as well, such as using remote_function in the select_tag. But try the steps above and let me know what you think

Last edited by wesf90 (2012-02-12 12:52:16)

Remember to edit your topic title and add "[SOLVED]" if your question has been answered!

Follow me!

Re: Update page content based on menu selection

Hi there,I'm kind of new to rails and i'm actually stuck with quite the same problem.

I want to update a div content based on a select.Your solution might be good but i think it can be easier.Looking at jquery_ujs source code it looks like there's a hook there for handling select onchange directly :
jquery_ujs source code :
$.rails = rails = { 
  // Link elements bound by jquery-ujs   
linkClickSelector: 'a[data-confirm], a[data-method], a[data-remote], a[data-disable-with]',
// Select elements bound by jquery-ujs   
inputChangeSelector: 'select[data-remote], input[data-remote], textarea[data-remote]',

So it looks like inputChangeSelector is looking for select with data-remote=true (if my understanding is correct).
In that case you just have to create a new action in your controller which responds with <name_of_the_action>.js view.
That way you just have to change your div html content in this .js file.

Unfortunatly i haven't been able to make this works. I can't find what is the correct attribute for the url that has to be called.i manage to render a select with data-remote=true and an action or url attribute pointing to my action but so far it doesn't work ....

I think it may be helpful to open an issue on jquery_ujs github page .....

Thank You anyway


Last edited by fifoooo (2012-03-01 17:34:46)