Rails 3 с прототипом, создающим динамические выпадающие списки внутри формы с вызовами базы данных

Question

Я искал хороший способ создания динамических выпадающих списков, которые являются частью формы.Выпадающие списки должны быть заполнены данными из базы данных на основе предыдущего раскрывающегося списка.Я не нашел хорошего рельса 3 / прототип решения.Я видел некоторые частичные решения с jQuery и использованием прототипов старых помощников .Тем не менее, я прочитал, что использование устаревших помощников не очень хорошая идея, поэтому я пытаюсь обойтись без них, все еще используя прототип.

Я понимаю, что это большой вопрос, однако, я предполагаю, что это уже было сделано несколько раз, и если у кого-то есть хорошее, как это было бы высоко ценится.Если нет, то мой план атаки - использовать onchange, чтобы вызвать вызов javascript для отправки запроса на сервер.Затем обновите частичное, следующее поле выбора, соответствующими параметрами и затем повторите.

Немедленный вопрос: Как вы генерируете вызов страницы ajax, используя прототип?Мне нужно отправить результат первого выпадающего на мой контроллер.URL должен быть car_infos / update_make / "year".

У меня есть этот тег выбора в моей большей форме, который вызывает функцию javascript.

    <%= select_tag 'year', options_from_collection_for_select(@vehicle_years, "year", "year"), {:include_blank => true, :onchange => "submitYear(this.value)" }%>

Спасибо за любую помощь, когда я начал работать с Rails.

Обновление: Я генерирую запрос к серверу с этим javascript:

  function submitYear(year){
    new Ajax.Request('/udpate_make/'+year, {method: 'get'});
}

Однако, он не генерирует правильный URL.Если я добавлю / car_infos / update_make, он сгенерирует car_infos / car_infos / udpate_make /.Если я возьму в / car_infos часть, она просто делает / update_make и пропускает car_infos.Я получаю два или ни одного.До сих пор не знаю, как сгенерировать правильный URL-адрес 'car_infos / update_make / year', я реализую опцию наблюдения, как упомянуто @Jaryl, но все еще возникают проблемы с генерацией URL-адреса.Вот мои маршруты ...

resources :car_infos

match 'car_infos/update_make/:year', :controller => 'car_infos', :action => 'update_make'

Обновление : с другой частью путешествия

Чтобы решить дублирующую часть URL, мне пришлось сделать следующее:

    function submitYear(year){
    new Ajax.Request('update_make/'+year, {method: 'get'});
}

Обратите внимание на отсутствие / из предыдущего примера.До сих пор не знаю, почему при размещении там car_infos это дублирует его.но по крайней мере я сейчас генерирую действительный Ajax-запрос к серверу.

Answer 1

Поскольку вы используете Rails 3, где устаревшие помощники устарели.Вы должны использовать что-то вроде jQuery UJS .Что вы делаете, это извлекаете вспомогательные коды JS из вашего тега select следующим образом:

<%= select_tag 'year', options_from_collection_for_select(@vehicle_years, "year", "year") %>

Затем в вашем файле JS (здесь я использую jQuery) вы добавляете коды, выполняющие функцию JS:

$('#year').change(function(e) {
  // some AJAX call here using $('#year').val()
});

Чтобы сделать это в Prototype (см. документы для наблюдения за событиями ), это будет примерно так:

Event.observe('#year', 'change', function(event) {
    // ...
});

Answer 2

Это то, что я в итоге сделал, чтобы создать свои динамические выпадающие меню с Protoype на случай, если кто-то еще пойдет по этому пути. Пожалуйста, дайте мне знать, если есть лучший способ:

Создание маршрутов для соответствующего контроллера, мой контроллер - car_infos

    match 'car_infos/update_make/:year', :controller => 'car_infos', :action => 'update_make'
match 'car_infos/update_model/:year/:make', :controller => 'car_infos', :action => 'update_model'

Внутренняя форма имеет первый выпадающий список и отображает часть.

    <div id="year_sel">
    <%= f.label :car_year %>
    <%= select_tag 'year', options_from_collection_for_select(@vehicle_years, "year", "year"), {:include_blank => true, :onchange => "submitYear(this.value)" }%>
  </div>
  <div id="make_select">
    <%= render 'make_sel' %>
  </div>

Создайте ссылку в javascript в вашем файле application.js:

    function submitYear(year){
    new Ajax.Request('update_make/'+year, { method: 'get'});
}

Получите ваш файл .js.rjs, который отвечает на запрос ajax и отображает частичное.

page.replace_html('make_select', render('make_sel'))

В вашей функции контроллера убедитесь, что она соответствует формату .js.

Надеюсь, это поможет кому-то еще, так как мне понадобилось два дня, чтобы найти все.