在Rails 5中使用ajax更新复选框选项

时间:2016-12-25 03:52:03

标签: javascript ruby-on-rails ruby ajax forms

对该应用的一点解释。这是一个多校区组织的旅游注册系统。有人应该可以进入并从选择框中选择一个校园,并将“选项”复选框和“巡视日期”单选按钮更新为校园特定。

当有人更改选择框时,我已经触发了脚本,但是当我进入路径并且网址看起来非常不稳定时,它会一直返回404。另外我知道当我尝试.html用新选项替换部分时我会遇到麻烦。好的,不用多说,这是代码。任何指导将不胜感激!

_form.html.erb

...
<div class="field">
    <%= label_tag 'Campus' %>
    <%= select_tag 'campuses', options_from_collection_for_select(@churches, 'id', 'name', selected: (@registration.event.church.id unless @registration.event.nil?) )%>
</div>

<div class="field">
    <%= label_tag 'Areas of Interest' %>
    <div id="options_container">
        <%= f.collection_check_boxes :option_ids, @options, :id, :ministry_area do |b| %>
        <div class="collection-check-box">
            <%= b.check_box %>
            <%= b.label %>
        </div>
        <% end %>
    </div>
</div>

<div class="field">
    <%= label_tag 'Tour Dates' %>
    <div id="events_container">
        <%= f.collection_radio_buttons(:event_id, @events, :id, :event_datetime) do |b| %>
        <div class="radio">
            <%= b.radio_button + " " + b.label %>
        </div>
        <% end %>
    </div>
</div>

<div class="actions">
    <%= f.submit params[:action] == 'edit' ? "Update Registration" : "Register", class: 'button' %>
</div>
<% end %>

<script>
    $(document).ready(function () {
        $('#campuses').change(function () {
            $.ajax({
                url: "<%= update_campus_options_and_events_path %>",
                data: {
                    campus_id: $('#campuses').val()
                },
                dataType: "script"
            });
        });
    });
</script>

的routes.rb

Rails.application.routes.draw do
  resources :registrations
  root 'registrations#index'
  get 'update_campus_options_and_events', to: 'registrations#update_campus_options_and_events'
end

registrations_controller.rb

...
  def update_campus_options_and_events
    @events = Event.find(params[:campus_id])
    @options = Option.find(params[:campus_id])
    respond_to do |format|
      format.html
      format.js {}
    end
  end
...

update_campus_options_and_dates.js.erb

console.log('Options changed via ajax');
$('#options_container').html("<%= escape_javascript(<%= f.collection_check_boxes :option_ids, @options, :id, :ministry_area do |b| %>) %>");
$('#events_container').html("<%= escape_javascript(<%= f.collection_radio_buttons(:event_id, @events, :id, :event_datetime) do |b| %>) %>");

0 个答案:

没有答案