帶有原型的 Rails 3 在帶有數據庫調用的表單內進行動態下拉

Question

我一直在尋找一種創建表單一部分的動態下拉列表的好方法。 下拉列表需要根據之前的下拉列表填充數據庫中的數據。 我還沒有找到一個好的 rails 3/prototype 解決方案。 我已經看到了一些使用jQuery和使用原型遺留助手的部分解決方案。 然而，我讀到使用遺留助手不是一個好主意，所以我試圖在沒有它們的情況下做到這一點，同時仍然使用原型。

我知道這是一個很大的問題，但是，我認為這已經完成了好幾次，如果有人有好的方法，將不勝感激。 如果不是，我的攻擊計划是使用 onchange 觸發 javascript 調用以向服務器發送請求。 然后更新部分，下一個 select 框，用適當的選項然后重復。

直接問題：如何使用原型生成 ajax 頁面調用？ 我需要將第一次下拉的結果發送到我的 controller。 url 將是 car_infos/update_make/"year"。

我有這個 select 標簽在我的較大的形式，調用 javascript function。

    <%= 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。 我得到兩個或沒有。 仍然不確定如何生成“car_infos/update_make/year”的正確 url 我將實現 @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 之類的東西。 您所做的是從 select 標記中取出 JS 幫助程序代碼，如下所示：

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

然后在您的 JS 文件中（我在這里使用 jQuery），添加執行 JS function 的代碼：

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

要在 Prototype 中執行此操作（請參閱觀察事件的文檔），它將是這樣的：

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

Answer 2

這就是我最終使用 Protoype 創建動態下拉菜單的方法，以防其他人走這條路。 請讓我知道是否有更好的方法：

為適當的 controller 創建路線，我的 controller 是 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>

在 application.js 文件中構建 javascript 中的鏈接：

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

讓 your.js.rjs 文件響應 ajax 請求並呈現部分。

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

在您的 controller function 中，確保它響應 .js 格式。

希望這對其他人有所幫助，因為我花了兩天時間才找到所有內容。