Rails 3的原型在一个带有数据库调用的表单中创建动态下拉框

Rails 3 with Prototype Making Dynamic Drop Downs inside a form with database calls

本文关键字：表单 调用 创建 数据库 动态 原型 一个 Rails      更新时间：2023-09-26

我一直在寻找一种创建动态下拉列表的好方法，它是表单的一部分。下拉框需要根据前一个下拉框填充来自数据库的数据。我还没有找到一个好的rails 3/原型解决方案。我已经看到了一些使用jQuery和使用原型遗留助手的部分解决方案。然而，我读到这不是一个好主意，使用遗留的助手，所以我试图做到没有他们，而仍然使用原型。

我知道这是一个很大的问题，但是，我认为这已经做了几次，如果有人有一个很好的方法，将不胜感激。如果没有，我的攻击计划是使用onchange触发javascript调用向服务器发送请求。然后用适当的选项更新部分，即下一个选择框，然后重复。

直接问题:如何使用prototype生成ajax页面调用?我需要将第一个下拉的结果发送到我的控制器。url将是car_info/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。我要么得到两个，要么没有。仍然不确定如何生成"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_info放在那里时，它会复制它。但至少我现在生成一个有效的Ajax请求到服务器。

因为您使用的是Rails 3，旧的帮助器已弃用。您应该使用类似jQuery UJS的东西。你要做的是从选择标签中取出JS helper代码，如下所示:

<%= 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) {
    // ...
});

这就是我最终用prototype创建动态下拉菜单的方法，以防其他人沿着这条路走下去。如果有更好的方法，请告诉我:

为适当的控制器创建路由，我的控制器是car_info 

    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'});
}

有你的。js。响应ajax请求并呈现部分的RJS文件。

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

在你的控制器函数中，确保它响应.js格式。

希望这能帮助别人，因为我花了两天时间才找到所有。

相关文章：