Dynamic select with onchange function calling to jquery with ajax - ruby-on-rails

Question

PLease help , I used some examples to build dynamic select, but it does not seem to work , nevertheless in console I can see 200 status, I am not fluent so please please help, The problem is that list in the select will not decrease, it shows same options after choosing previos
index.html.erb
<%= collection_select(nil, :site_id, #sites, :id, :name, {:prompt => "Select a Site"}, { :id => "sites_select"}) %>
<br/>
<%= collection_select(nil, :floor_id, #floors, :id, :name, {:prompt => "Select a Floor"}, {:id => "floors_select"}) %>
<br/>
<%= collection_select(nil, :pod_id, #pods, :id, :name, {:prompt => "Select a pod"}, {:id => "pods_select"}) %>
<script>
$(document).ready(function() {
$('#sites_select').change(function() {
$.ajax({
url: "<%= update_floors_path %>",
data: {
site_id : $('#sites_select').val()
},
dataType: "script"
});
});
$('#floors_select').change(function() {
$.ajax({
url: "<%= update_pods_path %>",
data: {
floor_id : $('#floors_select').val()
},
dataType: "script"
});
});
});
</script>
devices_controller.rb
def update_floors
# updates floors and pods based on genre selected
site = Site.find(params[:site_id])
# map to name and id for use in our options_for_select
#floors = site.floors.map{|a| [a.name, a.id]}.insert(0, "Select a Floor")
#pods = site.pods.map{|s| [s.name, s.id]}.insert(0, "Select a Pod")
end
def update_pods
# updates pods based on floor selected
floor = Floor.find(params[:floor_id])
#pods =floor.pods.map{|s| [s.name, s.id]}.insert(0, "Select a Pod")
end
update_floors.js.erb
$('#floors_select').html("<%= escape_javascript(options_for_select(#floors)) %>");
$('#pods_select').html("<%= escape_javascript(options_for_select(#pods)) %>");
update_pods.js.erb
$('#pods_select').html("<%= escape_javascript(options_for_select(#pods)) %>");
routes.rb
get 'devices/update_floors', :as => 'update_floors'
get 'devices/update_pods', :as => 'update_pods'
root :to => "devices#index"
Appreciate any suggestion
Thank you,
D

Answer 1

Seems new loaded JavaScript not adding effects to parent page. Why not do the $().html inside the Ajax success callback. And make the update.js.html page only contains the options for select. Should work.
javascript:
$("#sites_select").change(function(){
$.ajax({
url: your_url,
//orther options ...
success: function(data){
$("#floors_select").html(data);
}
});
});
and in your update_floors.js.html
<%=options_for_select(#floors)%>
Do the same for update pods. :)

Answer 2

Problem is with your controller,
You have not mentioned the respond_to js block any where in the code,
Just put this code in both update methods,
respond_to do |format|
format.js
end

Answer 3

Give the response format in the controller respond_to :js, :only=>[:update_floors,:update_pods ]
Apart from that write the following into update_floors.js.erb file.
$('#floors_select').html("<%= escape_javascript(collection_select(:your_object_name, :floor_id, #floors.to_a, :id, :name, :prompt=>"Select a Floor")) %>");
I think the above will work.