Rails: Need a helping hand to finish this Jquery/Ajax problem.
- by DJTripleThreat
Here's my problem: I have a combo box that when its index changes I want a div tag with the id="services" to repopulate with checkboxes based on that comboboxes value. I want this to be done using ajax. This is my first time working with ajax for rails so I need a helping hand. Here is what I have so far:
My application.js file. Something that Ryan uses in one of his railscasts. This is supposed to be a helper method for handling ajax requests. Is this useful? Should I be using this?:
//<![CDATA[
$.ajaxSetup({
'beforeSend': function(xhr) {xhr.setRequestHeader("Accept","text/javascript")}
});
// This function doesn't return any results. How might I change that? Or
// should I have another function to do that?
$.fn.submitWithAjax = function() {
this.submit(function() {
$.post($(this).attr("action"), $(this).serialize(), null, "script");
return true;
});
};
//]]>
An external javascript file for this template (/public/javascripts/combo_box.js):
//<![CDATA[
$(document).ready(function(){
$('#event_service_time_allotment').change(function () {
// maybe I should be using submitWithAjax(); ??
$(this).parent().submit();
});
});
//]]>
My ???.js.erb file. I'm not sure where this file should go. Should I make an ajax controller?? Someone help me out with that part please. I can write this code no problem, I just need to know where it should go and what the file name should be called (best practices etc):
// new.js.erb: dynamic choices... expecting a time_allotment
alert('test');
// TODO: Return a json object or something with a result set of services
// I should be expecting something like:
// params[:event_service][:time_allotment] i think which I should use
// to return a json object (??) to be parsed or rendered html
// for the div#services.
Here is my controller's new action. Am I supposed to respond to javascript here? Should I make an ajax controller instead? What's the best way to do this?:
# /app/controllers/event_services_controller.rb
def new
@event_service = EventService.new
respond_to do |format|
format.html # new.html.erb
format.xml { render :xml => @event_service }
format.js # should I have a javascript handler here? i'm lost!
end
end
My /app/views/event_service/new.html.erb. My ajax call I think should be a different action then the form:
<% content_for :head do %>
<%= javascript_include_tag '/javascripts/combo_box.js' %>
<% end %>
<% form_for @event_service, :url => admin_events_path, :html => {:method => :post} do |f| %>
<!-- TimeAllotment is a tabless model which is why this is done like so... -->
<!-- This select produces an id of: "event_service_time_allotment" and a name of: "event_service[time_allotment]" -->
<%= select("event_service", "time_allotment", TimeAllotment.all.collect {|ta| [ta.title, ta.value]}, {:prompt => true}) %>
Services:
<!-- this div right here needs to be repopulated when the above select changes. -->
<div id="services">
<% for service_type in ServiceType.all %>
<div>
<%= check_box_tag "event_service[service_type_ids][]", service_type.id, false %>
<%=h service_type.title %>
</div>
<% end %>
</div>
<% end %>
ok so right now ALL of the services are there to be chosen from. I want them to change based on what is selected in the combobox event_service_time_allotment.
Thanks, I know this is super complicated so any helpful answers will get an upvote.
