Question

我正在使用Rails（v.5.2.3）应用程序，该应用程序应基于（1）不同的变量和（2）上的套索选择为空间数据（模型“测量”）提供数据过滤功能一张地图。这两个过滤器选项应在同一视图中可用（“欢迎/索引”）。

用于准备和过滤数据的控制器的相关部分：

# app/controllers/welcome_controller.rb
def index

    @selected_measurements = Measurement.where(
        "measurements_id IN (?) OR name = ?",
        params[:spatial_lasso_selection],      
        params[:query_site_name]
    ).all

    gon.selected_measurements = @selected_measurements.to_json
end

在视图中，我将form_tag用于过滤器变量定义（1）：

# app/views/welcome/index.html.erb
<%= form_tag({controller: "welcome", action: "index"}, method: "get") do %>
    <%= label_tag(:query_site_name, "Site name:") %>
    <%= text_field_tag(:query_site_name, (params[:query_site_name] or "")) %>
    <%= submit_tag("Search") %>
<% end %>

在资产目录中，我有一个javascript文件，该文件构造了一个传单地图（通过传单轨道），将点数据添加为标记，并为地图上的（2）套索选择启用了leaflet-lasso plugin。此代码嵌入在欢迎视图中，以在那里显示地图。

套索选择为我提供了一个Measurement_ids的javascript数组。我想将此数组发送到我的rails控制器以过滤数据并更新视图（params[:spatial_lasso_selection]）。我了解到我应该使用ajax请求来执行此操作，但是我很难实现它。我不明白如何将form_tag和raw javascript一起使用来使（1）和（2）都无缝地工作。

我认为ajax调用必须如下所示：

$.ajax({
    type: "get",
    url: '/welcome/index',
    data: { spatial_lasso_selection: JSON.stringify(lasso_selected_measurements) },
});

Answer 1

ajax请求也有问题。相反，我使用输入文本值属性将我的javascript变量传递给控制器。首先，使用隐藏的输入属性（在您的index.html中具有特定ID的简单形式）。下一步创建按钮会将变量发送到

<form id "myForm" action="/welcome/index">
  <input type="hidden" id="myVar" name="varParams">
</form>
<button id="btnSend">SEND</button>

然后，创建Javascript函数，以在单击按钮时使用所需的变量设置输入文本的值。只需将下面的代码放在您的index.html中。

<script>
document.getElementById('btnSend').addEventListener('click', function () {
  document.getElementById("myVar").value = "myValue";
  document.getElementById("myForm").submit();
});
</script>

接下来，只需在welcome_controller.rb中检索myVar参数即可。

  def index
    myVar = params[:varParams]
    # Do something with myVar variable  
  end

将JavaScript选择变量传递到Rails控制器

1 个答案: