Dynamic Select Using Rails 3 and jQuery

Question

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 also tried this code with Rails 4 recently and it does not work also. Not firing any post request. Any idea why? — Taufiq Muhammadi
– Taufiq Muhammadi, Commented Oct 17, 2013 at 22:35

Viktor Trón · Accepted Answer · 2011-06-17 14:14:06Z

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')

slant · Accepted Answer · 2011-03-23 20:48:40Z

2

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.com/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.

answered Mar 23, 2011 at 20:48

slant

9358 silver badges15 bronze badges

Collectives™ on Stack Overflow

Dynamic Select Using Rails 3 and jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related