Dynamic select with onchange function calling to jquery with ajax

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

Yunwei.W · Accepted Answer · 2012-12-12 11:55:32Z

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. :)

edited Dec 12, 2012 at 11:55

answered Dec 12, 2012 at 7:45

Yunwei.W

1,5991 gold badge15 silver badges31 bronze badges

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

4 Comments

Dmitry Sterh Over a year ago

Started GET "/devices/update_pods" for 10.110.13.24 at 2012-12-12 13:41:25 -0800 Processing by DevicesController#update_pods as / Completed 500 Internal Server Error in 1ms ActiveRecord::RecordNotFound (Couldn't find Floor without an ID): app/controllers/devices_controller.rb:40:in `update_pods'

Dmitry Sterh Over a year ago

I added those lines of code, do you have Idea why it is so ?:(

Dmitry Sterh Over a year ago

Ok it works now , but it adds whole page under select tag , not only options.... I am going to create one more question , so it will not confuse people

Yunwei.W Over a year ago

Oh add render :layout => false to your controller's update_floors action to get rid of layout.

maximus ツ · Accepted Answer · 2012-12-12 07:39:40Z

1

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

answered Dec 12, 2012 at 7:39

maximus ツ

8,1163 gold badges30 silver badges56 bronze badges

1 Comment

maximus ツ Over a year ago

I suggest you to inspect the ajax request and reply from firebug, as well the web log. format.js block is necessary condition for rails app to respond to ajax request.

VenkatK · Accepted Answer · 2012-12-12 07:48:22Z

0

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.

answered Dec 12, 2012 at 7:48

VenkatK

1,3051 gold badge9 silver badges21 bronze badges

4 Comments

Dmitry Sterh Over a year ago

Completed 500 Internal Server Error in 9ms TypeError ({:only=>[:update_floors, :update_pods]} is not a symbol): app/controllers/devices_controller.rb:35:in `update_floors'

VenkatK Over a year ago

May I know where have you written the above line?

Dmitry Sterh Over a year ago

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") respond_to :js, :only=>[:update_floors,:update_pods ] end`

Dmitry Sterh Over a year ago

update_floors.js.erb

$('#floors_select').html("<%= escape_javascript(collection_select(@floors, :floor_id, @floors.to_a, :id, :name, :prompt=>"Select a Floor")) %>"); $('#pods_select').html("<%= escape_javascript(options_for_select(@pods)) %>");

Collectives™ on Stack Overflow

Dynamic select with onchange function calling to jquery with ajax

3 Answers 3

4 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related