2016-12-11 75 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 ..但我不知道还有什么可以做,它的工作原理。

如果任何人有一个更好的解决方案的任何想法,让我知道:)