Topic: Using AJAX in Views

Hello all,

I'm delving into the arena of using AJAX in Views.  As a simple test, I'm wanting to do the following:

I have a table of States with an id column and a name column.  I also have a table of Cities with and id column, a state_id column, and a name column.

I have a collection_select that is loaded with States data.

I would like to code my view in such a way that when a state is selected, a second collection_select is populated with cities belonging to that state.  I was thinking I could use link_to_remote from the prototype library to do this using the :onchange option in the collection_select, but that didn't seem to work.  I'm curious as to how I can code the view and the controller to do such a thing.

Anyone have a suggestion?  Thanks in advance! -- BTR

Re: Using AJAX in Views

I'd use Ajax.Updater to load the second select from the server and push the returned HTML into an element on the page.

Pseudo Code:

... client ... 
<select onclick="Ajax.Updater('id','select_action')>

... controller ..
def select_action
  layout = false
  find_state_cities
  render_city_select
end

Toby Hede
===================================================
FiniteStateMachine - Software Development for Social Networks
===================================================

Re: Using AJAX in Views

Toby,

Thanks for the suggestion.  I tried the following, but it didn't work...

View:
<html>
  <head>
    <title>Test</title>
    <%= javascript_include_tag :defaults %>
  </head>
  <body>
    <h1>Adding Data...</h1>
    <table>
      <%= form_tag :action => "submit" %>
        <tr>
          <td>Name: </td>
          <td><%= text_field "company", "name" %></td>
        </tr>
        <tr>
          <td>Address: </td>
          <td><%= text_field "company", "address" %></td>
        </tr>
        <tr>
          <td>State: </td>
          <td><%= collection_select(:state, :id, @states, :id, :name, {}, {:onchange => "Ajax.Updater('city_select', 'get_cities_by_state')"}) %></td>
        </tr>
        <tr>
          <td>City: </td>
          <td><div id="city_select"><select><option>Select A State First...</option></select></div></td>
        </tr>
        <tr>
          <td colspan="2"><center><%= submit_tag "Submit" %></center></td>
        </tr>
      <%= end_form_tag %>
    </table>
  </body>
</html>

Controller:
  def get_cities_by_state
    layout = false
    @cities = City.find(:all, :conditions => {:state_id => params[:state][:id]}, :order => "name")
    @html = '<select id="city_id"><option value="0">Select A City...</option>'
    @cities.each do |city|
      @html += '<option value={city.id}>{city.name}</option>'
    end
    @html += '</select>'
    render :text => @html.to_s
  end


Any suggestions?  Thanks! -- BTR

Re: Using AJAX in Views

Is the state_id parameter being passed? You many need to manually get the javascript to pass the param ... check your dev log to track the request.

Toby Hede
===================================================
FiniteStateMachine - Software Development for Social Networks
===================================================

Re: Using AJAX in Views

Toby,

Thanks again for the suggestion.  I ended up using the observe_field helper, which I think utilizes Ajax.Updater.  observe_field does the passing of the observed field value for me, which is good because I wasn't sure how to do that. :-)

Thanks! -- BTR