Rails select_tag with ajax action (Rails 3 and jQuery)

Question

I have the following select list.

<%= select_tag "project_id", options_from_collection_for_select(@projects, "id", "title") %>

When the user selects an option from the above list, the list below should be populated with values from database based on the above selection.

<%= select_tag "version_id", options_from_collection_for_select(??project.versions??, "id", "title") %>

I think i should make use of the onchange event, but i have no idea on how to use it. Someone help me please. Thanks!

@rubyprince I have written about rails 3(!!). The remote_function doesn't exist in Rails 3 — Don Tomato
– Don Tomato, Commented Oct 31, 2011 at 7:16
oh..sorry, in that case you can replace the onchange function with something in jQuery...I will post an answer with it... — rubyprince
– rubyprince, Commented Oct 31, 2011 at 10:13

rubyprince · Accepted Answer · 2013-11-04 05:58:05Z

25

Javascript

function update_versions_div(project_id) {  
  jQuery.ajax({
    url: "/update_versions",
    type: "GET",
    data: {"project_id" : project_id},
    dataType: "html"
    success: function(data) {
      jQuery("#versionsDiv").html(data);
    }
  });
}

Controller

def edit
  @projects = Project.all
  @versions = Version.all
end

def update_versions
  @versions = Version.where(project_id => params[:project_id]).all
  render :partial => "versions", :object => @versions
end

View

<%= select_tag "project_id", options_from_collection_for_select(@projects, "id", "title"), :prompt => "Select a project", :onchange => "update_versions_div(this.value)" %>
<div id="versionsDiv">
  <%= render :partial => 'versions', :object => @versions %>
</div>

Partial: _version.html.erb

<%= select_tag "version_id", options_from_collection_for_select(versions, "id", "title"), :prompt => "Select a version" %>

Also add a route for /update_versions in your routes.rb

match "/update_versions" => "<controller>#update_versions"

Here, you should replace <controller> with name of the controller.

I havent tested the code, so there may be errors.

Update

PullMonkey has updated the code with Rails 3 example, which is obviously superior than this code. Please checkout http://pullmonkey.com/2012/08/11/dynamic-select-boxes-ruby-on-rails-3/ also

edited Nov 4, 2013 at 5:58

answered Oct 31, 2011 at 10:16

rubyprince

17.9k12 gold badges70 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JellyFishBoy Over a year ago

Few improvements to this in terms of security and active record handling: @versions = Version.where('project_id = ?', params[:project_id]).first The where clause currently has a security flaw. Putting the string directly in could leave the query open to malicious content. Furthermore it is currently grabbing the ActiveRecord:Relation and not the object itself. Therefore adding a first method will fix this.

rubyprince Over a year ago

Hi @JellyFishBoy..there are 2 things here: - Version.where(project_id => params[:project_id]) - this where clause does not leave a security flaw, as far as I know. I am not putting the string directly, but, instead is passing a hash. It is the idiomatic way of writing conditions in Rails. Rails does the security handling, if we provide it as a hash. See Rails guide

rubyprince Over a year ago

@JellyFishBoy..About the .first, my intention is not to get the first record, but to get all the records, with the project id. You are right to say, that it returns an activerecord relation and it will fire the query right away, but this activerecord relation will fire the query as soon as methods like inspect, each are called against it. So, the code will work, but I agree that it is better to call explicitely. I will add that.

Collectives™ on Stack Overflow

Rails select_tag with ajax action (Rails 3 and jQuery)

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related