Pass javascript selection variable to rails controller

Question

I'm working on a rails (v.5.2.3) app that is supposed to provide data filter abilities for spatial data (model "measurements") based on (1) different variables and (2) a lasso selection on a map. Both of these filter options should be available in the same view ("welcome/index").

The relevant part of the controller for preparing and filtering the data:

# 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 

In the view I use form_tag for the filter variable definition (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 %>

In the assets directory I have a javascript file that constructs a leaflet map (via leaflet-rails), adds the point data as markers and enables the leaflet-lasso plugin for (2) lasso selection on the map. This code is embedded in the welcome view to display the map there.

The lasso selection gives me a javascript array of measurement_ids. I want to send this array to my rails controller to filter the data and update the view ( params[:spatial_lasso_selection] ). I learned that I should do this with an ajax request, but I have difficulties implementing it. I don't understand how form_tag and raw javascript can be used together to make both (1) and (2) work seamlessly.

I figure the ajax call has to look like this:

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

Answer 1

I have problem also with ajax request. Instead I use input text value property to pass my javascript variable to the controller. Firstly just make simple form with hidden input property that have specific id in your index.html . Next create button that will send the variable to

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

Then, create javascript function to set the value of the input text with our required variable when the button is clicked. Just put below code in your index.html .

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

Next, just retrieve the myVar params in your welcome_controller.rb .

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