Rails & combo box change event: Help make this obtrusive javascript unobtrusive
- by DJTripleThreat
Ok so a friend of mine gave some help with a prototype/obtrusive solution to this but its not quite there. Also, I want to make this unobtrusive instead of using the observe_field function that rails gives me. I don't want to use prototype either because I'm more familiar with JQuery.
Here's my problem: I have an Event that can have multiple ServiceTypes and a ServiceType can belong to many Events. A many-to-many relationship between these two exists as an OfferedService. When creating an event, I have a drop down with a list of TimeAllotments that are something like 10 minutes, 12 minutes, 15 minutes, 20 minutes, 30 minutes etc. When the user selects one of these choices, I want a div tag to be filled with a list of ServiceTypes that are associated with this TimeAllotment. So for example, the user selects "10 minutes" and then the div repopulates with services that last 10 minutes. Here is what I have so far:
... some erb code etc and then
<fieldset>
<legend><%= f.label :time_allotment, "Size of the Appointment Slots:" %></legend>
<div>
<span class="field-group">
<div>
<!-- TimeAllotment is a tabless model which is why this is done like so... -->
<%= select("event_service", "time_allotment", TimeAllotment.all.collect {|ta| [ta.title, ta.value]}, {:prompt => true}) %>
</div>
</span>
</div>
<div style="clear:both;"></div>
Services:
<div>
<span class="field-group">
<!-- 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>
</span>
</div>
<div class="clear"></div>
</fieldset>
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.
Can someone help me get pointed in the right direction? I have looked at Ryan's rails casts for using JQuery but its not helpful because he deals with ajax calls for the create action. This would be for the new or edit action. I have a new.js.erb but it doesn't get loaded when calling the new action. I'm super lost as far as getting JQuery to work with my application. I think that if someone can just show me how to make an alert pop up when I change the combo box, and how to return a dataset using ajax the right now, I think I can figure out the rest.
Thanks, I know this is super complicated so any helpful answers will get an upvote.
