AJAX请求无法从Rails应用程序中的控制器获取实例变量

Question

I'm trying to get data from my controller into a javascript file in a rails application. The html immediately invokes an ajax request using the select option and the organization id as parameters.

In a before_filter I have

def set_org_id
    if params[:id].present?
        @org_id = klass.find(params[:id]).id
    else
        @org_id = 0
    end
end

And in the js file I have:

$.ajax({ url: "/admin/analytics/filter",
        type: 'GET',
        data: {
          time_frame: selectedId,
          organization_id: <%= @org_id %>
        }
})

If I hard code a number as the organization_id everything works fine, but when I try to pass the data from the before filter, I end up with no id in the page.

I should add that the index route is admin/analytics/. The filter action is admin/analytics/filter. The user never navigates to that page, only ajax hits the filter route to get relevant data. Could this be that the ajax request is being send before the instance variable is set? If so, what is the proper solution?

Answer 1

Your JS won't be able to access your @instance variables unless you call them from your controller itself. The problem here is that if you're loading the ajax to access an instance varialbe - which simply won't work.

Let me explain...

---

JS

Javascript is known as a client side language - meaning it provides you with the ability to access elements in your HTML / DOM with relative impunity. The problem here is that Rails / Ruby, much like PHP, is server-side , and consequently is only able to provide rendered data to your browser

This means that calling the following simply won't work:

data: {
   time_frame: selectedId,
   organization_id: <%= @org_id %>
}

As explained, the reason for this is that you cannot access the @org_id from your Javascript. Firstly, you don't know if the @org_id variable will be set (in case you want to use the Rails helpers), and secondly, your JS won't be able to access the variable anyway (because it's Rails)

--

Fix

The purest fix for this is to somehow create the data you need in the DOM. I see from your answer that you have set a hidden field for your form. A much better way to do this is to set an HTML5 "data" attribute , or to use an id

You'd be better doing this:

<%= form_tag route_path, data: { org_id: @org_id } %>

This will give you the ability to call:

$(document).on("submit", "form", function(){
   $.ajax({
      ...
      data: {
        time_frame: selectedId,
        organization_id: $(this).data("org_id")
      }
   });
});

Answer 2

I was able to solve this by passing the data to a hidden field in the html.erb page.

<%= hidden_field_tag('org_id', @org_id) %>

Then in the javascript refer to the data through the selector.

organization_id: $('#org_id').val()

I don't love this, but at least it works.