在提交表单时更新 Google Charts 数据答案

【问题标题】：Updating Google Charts data on form submit在提交表单时更新 Google Charts 数据
【发布时间】：2013-07-08 16:47:59
【问题描述】：

我有一个 Rails 应用程序，其中 Google Charts 图表从外部服务器收集用户数据。用户模型中有一个方法可以从服务器获取这些数据，在 users#show 控制器方法中调用。

show 方法返回一个默认 JSON，然后我使用 users_helper 方法解析出来。它们返回一个 JSON 格式的字符串（不是 JSON 对象）供 Google Charts 使用。

我正在添加功能，以便能够为数据选择日期和日期。这是我的表格（在 HAML 中）：

= form_tag({:controller=>"manage/users", :action=>"show"}, :id => "datesform", method: :get, remote: true) do
  = text_field_tag :date_from, "", data: {behaviour: "datepicker"}, placeholder: "Date from", :id => "date_from_box"
  = text_field_tag :date_to, "", data: {behaviour: "datepicker"}, placeholder: "Date to", :id => "date_to_box"
  = submit_tag ("Search"), :id => 'chart_submit_dates'

目前，默认时间跨度为两个月（仅当 date_from/date_to 参数为空时才会发生）。看过之后，这行得通。图表得到了正确的数据，一切都被渲染了。

但是，除非我从表单中删除 remote: true 属性，否则提交表单不会更改数据。当我这样做时，整个页面都会刷新，但图表是使用表单中指定的正确数据时间范围生成的。

我想要实现的是在页面内更新图表数据，然后我可以在提交表单时调用重新渲染图表。这听起来像是 AJAX 的完美案例，但我尝试过的一切都没有奏效（尽管我对 AJAX 和 javascript 完全是个菜鸟，所以它主要是从网上的东西中剪切和粘贴的）

【问题讨论】：

标签： javascript ruby-on-rails ajax charts

【解决方案1】：

修复它。有这个问题的其他人：

我必须为图表制作一个 show.js 文件和 show.html 文件。在那个 js 中，我重新填充了图表数据，根据数据重新制作了表格，并使用该表格重新绘制了图表。在用户控制器中，我放入了一个 response_to 块，其中我同时指出了 format.html 和 format.js。完成此操作后，一切正常。没有刷新，图表只是在日期字段上点击提交后用新数据重新绘制。

【讨论】：