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.

Advertisements