Rails - 使用新数据渲染/刷新当前视图

Question

编辑：为了更简单的例子，跳到编辑部分。谢谢！

我正在尝试在我的应用中实现一个非常简单的东西。

我有一个图表视图，它基于两个查询参数：:from 和:to。我正在使用“Chartkick”，这些是我的视图和控制器。

索引视图（带调试）

<%= params %>

<input type="text" id="from-date">
<%= column_chart dashboard_chart_path(:from => @from, :to => @to)  %>

控制器

class DashboardController < ApplicationController
  def index
    @from = params[:from]
    @to = params[:to]
  end

  def call_from_ajax
    from = params[:from]
    to = params[:to]
    render action: 'index', to: to, from: from
  end

end

一切正常。当我在 URL 中键入查询参数时，图表会显示正确的信息。 现在我有了这个 JS 代码（用于测试）：

$(document).ready(function(){
    $('#from-date').pickadate({
      onClose: function() {
        array ={
          "from": "20-05-2018",
          "to": "01-05-2018"
        }
        $.ajax({
          type: 'GET',
          url: 'dashboard_chart_ajax',
          data: array
        })
      },
  });

路线

get 'dashboard_chart_ajax', to: 'dashboard#call_from_ajax'

ajax 调用工作得非常好。我的 'call_from_ajax' 方法被调用并且我的控制台显示索引视图已经被渲染。但是我认为 params 变量没有更新，图表也没有更新......（我检查了 byebug，params 包含 :from 和 :to 值） 我错过了什么？提前致谢。

编辑：

以上所有内容仅供练习。我们再举一个例子：

我添加了一条路线

get 'button', to: "dashboard#test"

我的控制器方法

def test
  redirect_to controller: :dashboard, action: :index, from: 'start_date', to: 'end_date'
end

def index
  @from = params[:from]
  @to = params[:to]
end

还有一个按钮在视图中

<%= button_to "Some Button", button_path, method: :get, remote: true %>
<%= params %>

我希望在单击按钮时更新视图中的 params 变量。

当我第一次加载页面时，在 :index 方法中我有：

 <ActionController::Parameters {"controller"=>"dashboard", "action"=>"index"} permitted: false>

当我点击按钮时，我有：

<ActionController::Parameters {"from"=>"start_date", "to"=>"end_date", "controller"=>"dashboard", "action"=>"index"} permitted: false>

但视图中没有任何变化... 这太令人沮丧了，但我正在学习，一定是遗漏了一些东西。

我的目标是用我的“测试”方法更改一个变量，然后在同一个视图中显示它。

如果有人可以帮助我，将不胜感激。

Answer 1

似乎有几个潜在的问题。

首先，您没有对 AJAX 响应做任何事情。我会期待以下内容：

$(document).ready(function(){
  $('#from-date').pickadate({
    onClose: function() {
      array ={
        "from": "20-05-2018",
        "to": "01-05-2018"
      }
      ajaxResponse = $.ajax({
        type: 'GET',
        url: 'dashboard_chart_ajax',
        data: array
      })
      ajaxResponse.success(data) {
        // do some stuff with the returned data
      }
    },
});

我的语法可能不正确，因为我已经有一段时间专门在 coffescript 中写作了。提前道歉。

其次，$(document).ready 位可能有问题，也可能没有问题，具体取决于您是否使用 turbolink。就个人而言，我从所有项目中删除了 turbolink，因为我觉得它没有用。所以，这有点像在黑暗中刺伤。

Answer 2

通过在按钮上添加remote: true，你告诉Rails 执行异步请求而不是常规的页面切换。因此，发送了 Ajax 调用，并且根本没有对其响应进行任何处理。要在页面上反映更改，您可以做两件事：要么通过删除 remote 属性来坚持常规调用，要么将回调绑定到 ajax 请求完成。第二种方法更难实现，但更灵活、更强大。

下面是绑定回调到 Rails UJS 事件的示例：https://github.com/rails/jquery-ujs/wiki/ajax