2016-12-11 73 views
0

我正嘗試創建一個帶下拉的表單,用戶可以在其中創建一個新對象,如果選擇了「Create new」之類的選項,或者他們可以選擇從他們的以前創建的對象,這些對象應該用相應的數據預填充表單。如何使用下拉列表更新/預填充Rails表單

目前我只需要爲每個循環填充下拉列表以及之前創建的對象,該對象位於表單之外,並且創建新對象的窗體。

如何使這個表單動態顯示,以便當選擇先前選擇的對象時,表單預填充並允許編輯?

回答

1

您必須向自定義路由發出AJAX GET請求,然後執行一個響應json格式的控制器操作,並返回基於該GET請求中傳遞的參數的集合。說,你是加載基於選定的化妝可用車型:

路線:

get '/get_models/:make_id', to: 'car_makes#available_models' 

控制器動作:

def available_models 
    @models = Model.where(id: ids) 
    respond_to do |format| 
    format.json { render json: @models } 
    end 
end 

AJAX請求:

var fetchModels = function(makeId){ 
    $.ajax({ 
    method: 'GET', 
    url:  '/get_models/' + makeId, 
    success: function(data) { 
     ... 
     var target = $('select#car_models'); // field to which options are appended 
     $.each(data, function(id, model){ 
     $(target).append(
      $('<option>').text(model).attr('value', id) // populate options   ); 
     }); 
    } 
    ... 
    }); 
} 

,然後設置在家長.change事件中觸發的AJAX請求select LD:

$('select#car_makes').change(function(){ 
    var makeId = $(this).val(); 
    fetchModels(makeId); 
}); 

有許多資源,解釋等方式實現這一點:

+0

所以我理解並得到這個在大多數情況下,斷開我之間是如何結合與軌道方式使用此信息然後可以編輯選定的對象並保存它。 – Kevin

+0

從我可以告訴所有這一切是讓一個選擇一個汽車製造,然後更新另一個可用的車型下拉。爲了繼續你的比喻,我需要一個能夠選擇一個汽車製造,然後能夠改變汽車製造對象的屬性,如名稱,在一個填充了它的屬性的形式,然後保存。 – Kevin

+0

所以你希望訪問者有'make'集合有一個選擇,那麼一旦選擇了make,具有'make'對象屬性的字段就會被追加到同一個表單中。正確? –

0

所以我最終通過所有可能的選擇循環對於選擇下拉菜單,並通過編輯欄形式循環顯示所有潛在選項,並使用jQuery onchange顯示/隱藏更改ect html。

這對我來說並不是一個很好的解決方案,特別是它必須每次加載所有選項的html ..但我不知道還有什麼可以做,它的工作原理。

如果任何人有一個更好的解決方案的任何想法,讓我知道:)