I want to dynamically populate a dropdownlist using jQuery. I am trying to call a controllers action but I don't know how with the collection_select object. I have tried the :input_html but the controller action is never called. I receive a parsing error in my javascript debugger because javascript is trying to parse the whole view page.

Code in View:

<div id="ssmodels">
  <%= collection_select :ssmodel, :ssmodel, @ssmodels, :id, :name, :input_html => {:rel => "/phrases/update_submodel_select" }  %>
</div>

<div id="ssmodel_sssubmodel">
  <%= collection_select :ssmodel, :sssubmodel, @sssubmodels, :id, :name %>
</div>

Javascript in Application.js:

$.fn.subSelectWithAjax = function() {
  var that = this;
  this.change(function() {
    $.post(that.attr('rel'), {id: that.val()}, null, "script");
    return false;
  })
};

$(document).ready(function(){$("#ssmodels").subSelectWithAjax();
})


$(document).ready(function(){$("#ssmodel_sssubmodel").subSelectWithAjax();
})

Please help.

I want to dynamically populate a dropdownlist using jQuery. I am trying to call a controllers action but I don't know how with the collection_select object. I have tried the :input_html but the controller action is never called. I receive a parsing error in my javascript debugger because javascript is trying to parse the whole view page.

Code in View:

<div id="ssmodels">
  <%= collection_select :ssmodel, :ssmodel, @ssmodels, :id, :name, :input_html => {:rel => "/phrases/update_submodel_select" }  %>
</div>

<div id="ssmodel_sssubmodel">
  <%= collection_select :ssmodel, :sssubmodel, @sssubmodels, :id, :name %>
</div>

Javascript in Application.js:

$.fn.subSelectWithAjax = function() {
  var that = this;
  this.change(function() {
    $.post(that.attr('rel'), {id: that.val()}, null, "script");
    return false;
  })
};

$(document).ready(function(){$("#ssmodels").subSelectWithAjax();
})


$(document).ready(function(){$("#ssmodel_sssubmodel").subSelectWithAjax();
})

Please help.

• javascript
• jquery
• ruby-on-rails
• ruby-on-rails-3

• I also tried this code with Rails 4 recently and it does not work also. Not firing any post request. Any idea why? – Taufiq Muhammadi Commented Oct 17, 2013 at 22:35

2 Answers 2

i think the most unobtrusive way is if the js hook is agnostic about how the selected value is put in the url to be called.

So i solved this generic problem so:

application.js: in the body of your livehook/documentready function:

$('select[data-observe-url]').change(function() {
     var selected = $(this).find(':selected').val();
     var url = $(this).attr('data-observe-url').replace('%(selected)',selected)
     $.get(url)
     return false;
});

and then your html is:

<select id="signup_course_id" name="signup[course_id]" data-observe-url="http://localhost:3000/courses/%(selected)/select" >
<option value="">Choose Class</option>
<option value="1">excel 2007</option>
</select>

which was generated with formtastic like:

form.input :course, :collection => Course.all, :include_blank => 'Choose Class', 
      :input_html => { 'data-observe-url' => select_course_url('%(selected)') }

Think of %(selected) as a format-string-like parameter in the url which jquery replaces with the selected value using $(this).find(':selected')

Have a look at this tutorial. It basically allows you to have one select field pre-populated. When the .change() event is triggered on that field, it makes a request to the server with the selected value as a parameter. The response is then used to populate a second select field.

http://www.codecapers./post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx

We had pretty good success with this method. If that doesn't work for you, you could always store all of the results in one JSON object and just run your logic through that.