【问题标题】:Rails: Display database information based on user selectionRails:根据用户选择显示数据库信息
【发布时间】:2017-05-19 22:42:11
【问题描述】:

我有一个表单,用户可以选择一个日期范围来调用它

Borrow_date
Return_date

并根据此日期范围,某些项目可用。所以我们可以称之为

Bicycles.available_based_on_date(borrow_date, return_date)

基本上,上述函数接受两个日期,并提供在这些日期内可用的自行车。

问题是我想在表单中动态地做。所以用户选择

<%= form.date_field :Borrow_date, min: Date.today%>
<%= form.date_field :Return_date, min: Date.today%>

根据用户选择的内容,我想向他们展示可用的内容。我该怎么做?尝试了JS,但最终意识到我无法用JS数据进行查询。

我已经阅读过 JSON 是要走的路,但我不知道具体该怎么做。 (如果这是正确的方法。)

【问题讨论】:

  • 您可以使用 Ajax 获取 Bicycles.available_based_on_date(将在 Bicycle 模型中定义为范围)并使用 jQuery/javascript 小脚本将它们显示在您的表单上。你试过什么了?向我们展示您的查看代码。
  • 我如何使用 Ajax 来做到这一点?我不熟悉它。另外,我提到的自行车功能已经实现并且可以工作。我只是不知道如何获取前端信息以进行后端调用并显示它。
  • @codingdraculasbrain 正如 Gerry 所说,您需要向我们展示一些 html 代码。一般流程是使用 javascript 或 jquery 获取适当的 html 元素值,发出 ajax.post 请求以将值发送到后端,通过添加指向特定控制器的 post 路由设置 ruby​​ 以接受此类请求,然后在该控制器中执行您想要执行的操作并使用 json 回复 ajax 请求。当您从 rails 取回数据时,您可以使用适当的 html 选择器来显示或您打算做的任何事情
  • 您需要做一些研究 - 堆栈溢出将帮助您解决特定问题,但不能解决一般的“我如何使用 ajax”问题。它也不会为您编写代码。试试这个开始:launchschool.com/blog/…

标签: ruby-on-rails forms


【解决方案1】:

这是一个使用ajax(使用jQuery)获取数据以填充另一个select框的示例;考虑这是一种基本形式(我改编了一些我已经拥有的代码),您需要根据您的特定需求进行定制。也就是说,它功能齐全,可以助您一臂之力。

表格

首先您需要设置表单,此示例仅显示相关代码以向您展示如何使用 ajax:

<form id="my-form" action="/bicycles" method="post">
  <select id="borrow-date" class="my-date">
    <option value="" selected>-- select date --</option>
    <option value="2017-05-17">05-17-2017</option>
    <option value="2017-05-18">05-18-2017</option>
    <option value="2017-05-19">05-19-2017</option>
  </select>
  <select id="return-date" class="my-date">
    <option value="" selected>-- select date --</option>
    <option value="2017-05-17">05-17-2017</option>
    <option value="2017-05-18">05-18-2017</option>
    <option value="2017-05-19">05-19-2017</option>
  </select>
  <select id="bikes">
    <option value="">-- select bicycle --</option>
  </select>
</form>

如您所见,selectid="bikes" 没有选项,这只是一个占位符,用于在您取回它们后设置实际选项(来自 ajax 调用)。另请注意,两个日期 select 框具有相同的 `class="my-date",这对于从它们中获取值很重要。

脚本

接下来,设置一个 script(本示例使用 jQuery,但您也使用 javascript),它将从两个日期 select 框中获取值并将它们发送到您的控制器。

<script type="text/javascript">
  $(document).ready(function() {
    $('.my-date').on('change', function() {
      var data = {}

      $('.my-date').each(function() {
        if($(this).val()) {
          data[$(this).attr("id")] = $(this).val();
        }
      });

      if(Object.keys(data).length > 1) {
        $.ajax({
          headers: {
            'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
          },
          type: "POST",
          url:  "<%= bikes_path %>",
          data: data
        });
      }
    });
  });
</script>

上述脚本仅使用一个验证(即两个日期都被选中),但您可以根据需要添加任意数量。

还要注意脚本如何使用类"my-date" 迭代每个元素以将值设置到data 变量中。 data 将有两个值:borrow-datereturn-date(您的日期 ID select 框)。

控制器

接下来将 acrion 添加到您的控制器(或使用现有的)以获取值(将在 params:borrow_date:return-date 中提供)并使用它们来查询您的模型 Bicycle ,类似这样:

def bikes
  @bikes = Bicycle.available_based_on_date(params[:borrow_date], params[:return_date])
end

注意bikes 操作的使用,它与您在ajax 调用中指定的路由相同(在url: "&lt;%= bikes_path %&gt;" 中)。

查看

最后设置您的视图,将您的选项添加到设置为占位符的select (id="bikes"):

var options = "";

<% @bikes.each do |bike| %>
  options += "<option value='<%= bike.id %>'><%= bike.name %></option>"
<% end %>

$('#bikes').html(options);

该视图必须遵循与html 视图相同的命名约定,但使用js 而不是html(即bikes.js.erb),因为控制器需要以该格式响应ajax 请求.

因为这个视图也是erb,所以你可以像在任何视图中一样使用ruby,所以我们迭代@bikes并为每个视图分配一个option并将它们添加到你的select框.

【讨论】:

  • 非常感谢您输入此内容。它有很大帮助。我在视图部分遇到问题。是因为我试图使用部分: 'form.js.erb', :locals => { ....} %> 还是没关系?另一个问题可能是我的 date_fields 没有传递参数,但我不确定如何检查...
  • @codingdraculasbrain 从局部渲染无关紧要,只要您正确设置了端点(也就是说,将获取自行车数据的操作控制器(在我的示例中为bikes ). 使用视图到底有什么问题?你有什么错误吗?
  • @codingdraculasbrain 要检查您的 date_fields 是否正在传递参数,只需检查您的服务器日志。每个请求都使用该请求的参数记录,包括 ajax 调用。
  • 根据您的建议,我在 2017 年 5 月 22 日 11:59:55 -0700 收到此消息“开始 POST”/requests 为 ::1 由 RequestsController#create as / 参数:{"Borrow_d"=>"2017-05-23", "Return_d"=>"2017-05-25"} 无法验证 CSRF 令牌的真实性。完成 422 Unprocessable Entity in 1ms (ActiveRecord: 0.0 ms)" 不知道是什么意思 >.
  • @codingdraculasbrain 你能发布你的视图/部分代码吗?以这种方式发现问题会更快。事实上,我建议在你当前的问题和代码中发布一个新问题,这样你就不会改变这个问题的范围,而且更好的是,更多的用户可能会加入。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2021-11-08
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多