【问题标题】:Rails lookup form using drop down field使用下拉字段的 Rails 查找表单
【发布时间】:2012-01-08 16:42:49
【问题描述】:

我想这应该是非常简单的,经过毫无结果的搜索似乎它可能太简单了!

我有两个模型::client 和:job。客户有许多工作,工作属于客户。

在我的 routes.rb 中,我有一个嵌套资源,如下所示:

resources :client do
  resources :job 
end

以下手动输入的路径没有问题:

/client/:client_id/job

我想要的是工作索引页面上的一个简单的单字段下拉选择表单,其中列出了所有客户端,并且在提交时指向带有所选 client_id 的上述路径。

我在 view/job/index.erb 中有以下表格

<%= form_tag( client_index_path, :action => 'index', :method => 'get' ) do %>
  <%= collection_select ("job", "client_id", Client.all, "id", "name", {:include_blank => 'Filter by client'}) %>
  <%= submit_tag 'Go' %>
<% end %>

提交时解析为:

/client?utf8=✓&job%5Bclient_id%5D=2&commit=Go 

这是rails生成的HTML:

<select id="job_client_id" name="job[client_id]">
  <option value="">Filter by client</option>
  <option value="1">client1</option>
  <option value="2">client1</option>
  <option value="3">client2</option>
</select>

非常感谢您的帮助,谢谢

【问题讨论】:

    标签: ruby-on-rails forms activerecord select


    【解决方案1】:

    你不能通过没有任何 javascript 的纯 html 来做到这一点。表单总是提交到一个 URL,任何数据都通过 POST 或 GET 参数提供(那是 /client 之后的东西?)。

    有两种选择。

    如果您可以依赖启用的 javascript,则劫持提交按钮来构造 URL。像这样的:

    $("#form").submit(function(){
      client_id = $("#job_client_id").val();
      window.location = '/client/' + client_id + '/job/';
      return false; // don't sumbmit the form
    })
    

    编辑:这是一个工作示例:http://jsfiddle.net/Fj5Kh/1/

    您的第二个选择是将表单实际提交到服务器,并在那里进行重定向。这是一个额外的服务器调用,但它可以在没有 javascript 的情况下工作。您将创建一个理解表单并使用 redirect_to 行的特殊控制器操作

    【讨论】:

    • 谢谢斯派克!认为我几乎可以使用 javascript 解决方案。我还需要在表单中添加 onsubmit 或 action 吗?
    • 是的,抱歉,我在示例代码中使用了 jquery,因为它更简洁。如果您使用的是纯 JS,您需要为表单设置一个 onsubmit 处理程序(如果您加载了 jQuery,这就是 $("#form").submit(handler) 所做的)。
    • 非常感谢 - 我已经加载了 jquery。它似乎仍然没有拾取选定的值。我尝试调试,似乎我可以获得下拉列表的第一个选定文本值(使用 .text 和函数的后半部分),但是当我用 .value 替换它时,它不会返回选定的值。不知道我做错了什么。
    • 查看我的编辑以获取从选择框中获取值的示例
    • 再次感谢 Spike。我让您的示例适用于一个简单的表单,但是当我将其切换为使用生成的 rails 表单时,警报返回“未定义”。 rails 生成的 HTML 看起来与示例完全相同,所以我不确定发生了什么。如果您有更多的时间,那么任何更多的建议都会很棒,但请理解您是否已经花费了足够的时间!
    猜你喜欢
    • 2014-12-24
    • 1970-01-01
    • 2014-06-24
    • 2013-11-23
    • 1970-01-01
    • 1970-01-01
    • 2011-01-02
    • 1970-01-01
    • 2019-11-25
    相关资源
    最近更新 更多