Here is a simple example I got going that refreshes a text box based on the user changing the selection from a drop down box.
1. Setup jQuery
Download or add a link to the jQuery CDN as shown below.
application.html.erb
<!DOCTYPE html> <html> <head> <title>Blog</title> <%= stylesheet_link_tag "application" %> <%= javascript_include_tag "application" %> <%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html>
2. Create a view.
This view will populate a textbox with a ‘hello’ message whenever it’s selection has changed.
/views/foo/bar.html.erb
<div class="field"> <label>Category</label><br /> <select name="category[id]" id="category_id"> <option value="1">art</option> <option value="2">bikes</option> </select> </div> <input type="text" size="57" id="category_textbox">
3. Create a controller.
Our controller doesn’t do much at the moment.
class FooController < ApplicationController def bar end end
But to get it to work we need to add one route to our route table.
routes.rb
match ':controller(/:action(/:id(.:format)))'
Once we do that we should see this:
3. Add the ajax.
To detect the change in the drop down, we will use jQuery to register for the select ‘change’ event. Once caught, we will then do an ajax GET to the backend to retrieve our JSON response.
/views/foo/bar.html.erb
<script type="text/javascript"> jQuery(function($) { $("#category_id").change(function() { var state = $('select#category_id :selected').val(); if(state == "") state="0"; jQuery.getJSON('/foo/bar/' + state, function(data){ $("#category_textbox").val(data.message); }) return false; }); }) </script> <div class="field"> <label>Category</label><br /> <select name="category[id]" id="category_id"> <option value="1">art</option> <option value="2">bikes</option> </select> </div> <input type="text" size="57" id="category_textbox">
Note: This isn’t my preferred method of embedding javascript and I read that if I used the jQuery live method to register for events I should be able to extract this code into it’s own javascript file but I wasn’t able to get it going. Would love it if someone could show me what I am doing wrong – more information here (http://www.petermac.com/rails-3-jquery-and-multi-select-dependencies/).
4. Send back the response.
Now we just need to configure our controller to send back a json response, as well as handle the original html response.
class FooController < ApplicationController def bar @msg = { "success" => "true", "message" => "hello"} respond_to do |format| format.html format.json { render json: @msg } end end end
Once it’s all working, your show see something like this using Google Developer Tools:
It’s not perfect, but this example at least shows how to hook up jQuery and make an ajax call to a rails backend. I will update this once I learn more about the rails Asset Pipeline and why I wasn’t able to put the javascript into it’s own file.
Nov 03, 2011 @ 13:27:12
Looks like a good way not just for Rails 🙂
One thing that I am not sure about is what item/option state 0 stands for… Mostly in real world values are not an ordered sequence of 0 to N, but some sort of identifiers (guids, running sequences, etc). Maybe something among these lines would fix it (note: i have not tested this 🙂
if (state == ”)
var state = $(‘select#category_id option:first-child’).val();
Nov 03, 2011 @ 16:44:28
Now that I look at it I don’t think I need it Sean.
Will try it out later tonight. Thx.
Jul 12, 2012 @ 22:04:12
I tried this code.
But I cant get the data from my controller.
May 20, 2013 @ 02:32:53
so helpful! thanks
May 31, 2014 @ 10:47:15
Learn Jquery to bind dropdown list box
Jquery to bind dropdown Dynamically (Click Here)
Jun 18, 2014 @ 16:05:49
objects example with explanation
http://allinworld99.blogspot.com/2014/06/objects-in-javascript.html