Dynamic Select Menus in Rails 3
Here i am filtering the Districts Depending on States.
I have done this using jQuery.
you have to include jquery.js file and remove prototype.js file in head section i.e in your rails application to run this perfectly.
to do that follow this link
http://blog.sandeep.me/2011/09/how-to-use-jquery-instead-of-prototype.html
In a registration form I am getting districts depending on state selected.
please follow my git hub link above to understand clearly.
In controller file of registration form i.e regforms_controller.rb. i have written this method
here "state_id" is foreign key of state id in districts table.
def dynamic_districts
@districts = District.find_all_by_state_id(params[:id])
respond_to do |format|
format.js
end
end
Here i am getting all the districts of a particular State with state_id.
Note: Here model regform.rb belongs to both the models i.e state and district.
In model regform.rb you have make an association with state and district
belongs_to :state
belongs_to :district
Next in application.js file which is at public/javascripts folder
when you change the drop down menu of states, this ajax function will fire.....
jQuery(document).ready(function() {
jQuery('#regform_state_id').change(function() {
var data=$('#regform_state_id').val();
$.ajax({
type: "POST",
url: "http://"+location.host+"dynamic_districts/"+data,
data: data,
});
});
});
the resultant values will be posted to dynamic_districts.js.erb file which is located in views folder
of registration forms i.e "app/views/regforms".
Note:- this file has to be created by ourselves.
In the file dynamic_districts.js.erb
in the new.html..erb file of regforms add this jQuery code for prompt.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#regform_district_id').html("<option value=''>Select District</option>");
});
</script>
in routes.rb file which is in config folder. add this route. so that wherever you use the drop down you will be redirected to that controller only. that's the reason i have kept
" http:// location.host...." in ajax method above in application.js file.
post "dynamicdistricts/:id" => "regforms#dynamicdistricts"
$('#regform_district_id').empty();
<% for district in @districts %>
$('#regform_district_id').append($("<option></option>").attr("value",<%= district.id %>).text('<%= district.name %>'));
<% end %>
jquery will append the resultant values to district drop down menu.
thats it.
please post comments and let me know some feedback.
Written by Sandeep Kumar
Related protips
1 Response
hey Sandeep - how does your view template look like? would you be able to post it on github? Otherwise it's tricky for someone to fully understand your code.