2016-12-11 5 views
0

"新規作成"のようなものが選択されている場合、ユーザーが新しいオブジェクトを作成できるドロップダウンメニューがあるフォームを作成しようとしています。以前に作成されたオブジェクトは、対応するデータでフォームを事前入力する必要があります。ドロップダウンメニューを使用して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 fie LD:

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

これを達成するための他の方法を説明するリソースの数があります。

+0

だから私は理解し、大部分はこれを取得、私が持っている切断は、レールの形と一緒にこの情報を使用する方法との間にあります選択したオブジェクトを編集して保存することができます。 – Kevin

+0

私はこれが何であれ、車の製造を選択し、次に利用可能な車のモデルのための別のドロップダウンを更新することができると言うことができますから。あなたの類推を続けるためには、私は車の製作者を選ぶことができるようにする必要があります、そして車の属性の属性を変更することができます。それを保存。 – Kevin

+0

したがって、訪問者に 'makes'コレクションで1つの選択をさせたい場合、makeが選択されると、' make'オブジェクトの属性を持つフィールドが同じフォームに追加されます。正しい? –

0

だから私は潜在的なオプションのすべてをループすることになりましたドロップダウンリストでは、すべての可能なオプションを使用して編集レールフォームをループし、jQuery onchangeを使用してcorrを表示/非表示にしますect html。

これは私にとって非常に良い解決策のように感じることはありません。特に、毎回すべてのオプションのhtmlを読み込む必要があります。しかし、他に何ができるか分かりません。

誰もがよりよい解決策のための任意のアイデアを持っている場合、私に知らせてください:)

関連する問題