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

我的语法可能不正确，因为我已经专门用咖啡写了一段时间了。预先声明。

第二，根据您是否正在使用Turbolink，$(document).ready位可能是问题，也可能不是问题。就我个人而言，我从所有项目中删除了涡轮链接，因为我认为它没有用。因此，这在黑暗中有点刺痛。

Answer 2

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

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

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

2 个答案: