Создание вспомогательного тега с помощью UJS

Question

Во-первых, простите за мой английский. Я бразильский парень, который еще улучшается.

Я хочу создать вспомогательный тег под названием collection_cascading_select. Этот помощник похож на «collection_select», но у него есть еще один аргумент под названием «source». «Источник» - это другая коллекция в представлении.

Когда в «источнике» выбирается другая опция, функция JavaScript должна запускаться, чтобы получить его значение. Затем заполните коллекцию collection_cascading_select, согласованную с этим значением.

Это сбивает с толку! У меня одна неделя в этой проблеме, и мои бразильские братья мне не помогают.

Спасибо!

[РЕДАКТИРОВАТЬ]

@ Samo

Я заставляю его работать, но с некоторыми изменениями.

var success = function(response) {

for (var item in response){

    var id = response[item].breed.id   <--------------------  
    var name = response[item].breed.name <-------------------  
    var option = $(document.createElement('option')).val(id).html(name)
    dependentDropDown.append(option)  
  }  
}

Я не понимаю, как работает FOR IN.

Answer 1

Звучит так, как будто вы ищете ответ - пользовательский конструктор форм.Вы можете создать построитель форм и наследовать от построителя форм Rails, а затем установить этот построитель форм по умолчанию в своем приложении.Затем вы можете определить элемент с именем зависимые_падающие или cascading_selection и т. Д. Этот элемент, вероятно, будет принимать идентификатор выпадающего списка источника.Ваш помощник будет выводить collection_select, но он также выведет некоторый JavaScript, который вызовет AJAX-вызов при изменении раскрывающегося списка источника.

Конечно, вам не нужно делать это таким образом.Вы можете просто использовать collection_select, добавить некоторые атрибуты в раскрывающийся список источников (например, :class => 'source_for_dependent', :dependent => some_id), а затем подключить некоторый JavaScript в вашем application.js, который ищет коллекции с классом source_for_dependent, и когда событие onchangeзапускает, получает идентификатор из атрибута dependent и запускает AJAX-вызов.

В любом случае, вот пример вашего JavaScript (с использованием jQuery)

$('select.source_for_dependent').change(function() {
  var id = // get the id of the dependent dropdown, perhaps by $(this).attr('dependent')
  var dependentDropDown = $('#' + id);
  dependentDropDown.empty();
  var success = function(response) {
    for (var item in response) {
      var option = $(document.createElement('option')).val(item.val).html(item.text);
      dependentDropDown.append(option);
    }
  }

  $.get('/some_controller/some_action/' + $(this).val(), success);
}

Обработчик успеха передается в метод jQuery get.Он принимает ответ JSON в качестве аргумента.Мы перебираем ответ, и для каждого элемента мы создаем option, извлекая значение и текст из элемента, и добавляем его в зависимый выпадающий список.Ваш контроллер может выглядеть примерно так:

def some_action
  @obj = SomeClass.find(params[:id])
  respond_to do |format|
    format.js { render :json => @obj }
  end
end

Редактировать

Какой контроллер вы выбираете, зависит от вас.Допустим, Dropdown A предназначается для ресурса A, а Dropdown B предназначается для ресурса B. У объекта типа A должен быть список объектов типа B.Если вы собираетесь выполнить действие show для объекта A, тогда ваш метод as_json для объекта A должен включать его B ассоциаций. В этой статье приведены примеры этого.

В противном случае можно назначить действие index для ресурса B.Сделать B вложенным ресурсом A было бы простым способом отключить идентификатор A, чтобы получить все объекты типа B, которые имеют внешний ключ, указывающий на A.

Answer 2

Возможно, вы ищете что-то вроде этого: Ruby on Rails Страна / Штат Выбрать Enigma