2016-02-16 5 views
1

У меня есть этот кофейник для динамических ящиков выбора, чтобы показывать только те модели в окне выбора моделей, которые относятся к выбранным маркам в окне выбора. И у меня будет много полей, работающих с этой функцией отдельно, поэтому анонимная функция не будет работать.Вызов coffeescript в форме рельсов

Coffeescripts выглядит следующим образом

../assets/javascripts/diys.coffee

DynamicSelect = (makesSelect, modelsSelect) -> 
    $(document).on 'change', makesSelect, (evt) -> 
    $.ajax 'update_make_models', 
     type: 'GET' 
     dataType: 'script' 
     data: { 
     make_id: $("'makesSelect' option:selected").val() 
     } 
     error: (jqXHR, textStatus, errorThrown) -> 
     console.log("AJAX Error: #{textStatus}") 
     success: (data, textStatus, jqXHR) -> 
     console.log("Dynamic make select OK!") 

../views/diys/update_make_models.coffee

$(modelsSelect).empty() 
    .append("<%= escape_javascript(render "make_models/make_model") %>") 

И вот часть моей формы, которая будет повторяться несколько раз, изменится только идентификатор, который я буду p в качестве аргументов функции «DynamicSelect». Итак, где и что мне нужно, чтобы запустить эту функцию правильно?

<div class="vehicle_field"> 
    <%= f.fields_for :attached_vehicles do |av| %> 
    <p>Select make</p> 
    <%= av.select :make, options_for_select(@makes.collect { |m| [m.make_name, m.id] }), { include_blank: "Select make" }, { id: 'makes_select1' } %><br> 
    <p>Select model</p> 
    <%= av.select :model, (render "make_models/make_model"), {prompt: "Select model"}, { id: 'models_select1' } %><br> 
    <p>Select years</p> 
    <%= av.select :start_year, (Time.now.year + 1).downto(Time.now.year - 100).to_a, prompt: "Year (from)" %> 
    <%= av.select :end_year, (Time.now.year + 1).downto(Time.now.year - 100).to_a, prompt: "Year (to)" %><br> 
    <% end %> 
</div> 

------------------------------------------ -------------------------------------------------- ---------------------------------------- Редактировать, пытаясь выполнить динамический выбор ящики с атрибутом data-remote, как предложил Ричард Пэк

В консоли кажется, что я получаю право «make_id» в параметрах при выборе make in делает select box, но я не могу найти способ передать его контроллеры @models переменная, я что-то делаю правильно?

Форма часть для выбора транспортных средств, прикрепленных из поля зрения

<div class="vehicle_field"> 
    <%= f.fields_for :attached_vehicles do |av| %> 
    <p>Select make</p> 
    <%= av.select :make, (@makes.collect { |m| [m.make_name, m.id] }), { include_blank: "Select make" }, { data: { remote: true, url: "update_make_models", name: "make", update: "#diy_attached_vehicles_attributes_0_model"} } %><br> 
    <p>Select model</p> 
    <%= av.collection_select :model, @models, (render "make_models/make_model"), {prompt: "Select model"} %><br> 
    <p>Select years</p> 
    <%= av.select :start_year, (Time.now.year + 1).downto(Time.now.year - 100).to_a, prompt: "Year (from)" %> 
    <%= av.select :end_year, (Time.now.year + 1).downto(Time.now.year - 100).to_a, prompt: "Year (to)" %><br> 
    <% end %> 
</div> 

_make_model.html.Еврорадио частичная

<% @models.collect do |models| %> 
    <option value="<%= models.id %>"><%= models.make_model_name %></option> 
<% end %> 

Новое действие в diys_controller

def new 
    @diy = Diy.new 
    @step = @diy.steps.new 
    @attached_vehicle = @diy.attached_vehicles.new 
    @step.add_images_to_steps.new 
    @makes = Make.all 
    @models = MakeModel.where("make_id = ?", params[:make]) 
end 

Также удалены оба coffeescripts и отредактированные маршруты

get '/diys/update_make_models', to: 'diys#new', as: 'update_make_models' 

И это то, что я получаю в консоли после выбора сделать

Started GET "/diys/update_make_models?diy%5Battached_vehicles_attributes%5D%5B0%5D%5Bmake%5D=12" for ::1 at 2016-02-17 20:03:21 +0200 
Processing by DiysController#new as JS 
    Parameters: {"diy"=>{"attached_vehicles_attributes"=>{"0"=>{"make"=>"12"}}}} 
    Make Load (1.0ms) SELECT "makes".* FROM "makes" 
    MakeModel Load (1.0ms) SELECT "make_models".* FROM "make_models" WHERE (make_id = NULL) 
    Rendered make_models/_make_model.html.erb (3.0ms) 
    Rendered diys/_form.html.erb (151.0ms) 
    Rendered diys/new.html.erb within layouts/application (260.0ms) 
Completed 200 OK in 451ms (Views: 446.4ms | ActiveRecord: 2.0ms | Solr: 0.0ms) 

ответ

1

Вы можете просто связать .on к самому элементу:

#app/assets/javascripts/application.coffee 
$(document).on "change", "select#makes_select1", (evt) -> 
    $.ajax 'update_make_models', 
    type: 'GET' 
    dataType: 'script' 
    data: 
     make_id: $(this).find("option:selected").val() 
    error: (jqXHR, textStatus, errorThrown) -> 
     console.log "AJAX Error: #{textStatus}" 
    success: (data, textStatus, jqXHR) -> 
     console.log "Dynamic make select OK!" 

что-то прохладное вы хотите смотреть на это data-remote attribute for select boxes:

= f.collection_select :attribute, @collection, :id, :name, {}, { data: {remote: true, url: "update_make_models"} } 

Пропускает переменная params[:object][:attribute] до data-url, которая лет У вас будет возможность управлять вашим контроллером, чтобы отменить требуемые данные.

Использование вышеуказанного кода избавит вас от необходимости определения ajax в вашем JS.

+0

У меня было это раньше, когда у меня было только одно поле для прикрепленных_веков, но теперь, когда у меня будет много таких, мне придется писать этот же код несколько раз, только меняя идентификаторы элементов, нет Любым другим путем? –

+0

На самом деле вы можете сделать что-то довольно круто, позвольте мне уточнить ответ –

+0

Да, возможно, это лучший способ сделать это, попытался заставить его работать сейчас пару часов, но не могу понять это. В консоли кажется, что я получаю правильный идентификатор в параметрах при выборе make, но не могу передать его для переменной @models. Отредактировал мой вопрос, было бы хорошо, если бы вы могли проверить, что я делаю неправильно :) –

Смежные вопросы