How to pass a variable from Rails to Ajax

Question

I am trying to implement a progress bar (Javascript) with Ruby on Rails application, but I am having trouble passing values from controller to JS to update the bar.

Initially, I tried using a simple global variable ($count) but once loaded, the variable is always the same. It's not updated in the side of JS.

EDIT:

Now I am using gon gem to pass the value. But I only get the first value (that was setted when controller starts). When I call a method triggered by a button click, the value is updated but gon variable is always the same. Maybe is an error in rails/controller?

I saw an example with a method to expose variable to gon but is not working.

Note: If I remove the initialization before the search if, when search is clicked JS side shows "gon variable undefined"

Example Code: application_controller.rb

def application 
 @count =0 #gon assumes only this value
 exposeUnProcessedJobToJavascript
 if params[:search]
 while(@count < 10)
 exposeUnProcessedJobToJavascript
 sleep 3
 @count +=1
 end
 end
 def exposeUnProcessedJobToJavascript
 gon.watch.job = @count
 end
end

application.js.erb

function addJobWatchers() {
 if (gon.job != undefined) {
 gon.watch('job', {
 interval: 1000
 }, updateProcessingJob);
 }
}
function updateProcessingJob(job) {
 if (job) {
 console.log("JOB: " + job);
 }
}
$(document).on('page:change', function() {
 $("#search_button").click(function() {
 console.log("click search");
 if (typeof gon !== 'undefined') {
 addJobWatchers();
 }
 });});

Answer 1

Here is a gem that can help you do just that. It has plenty of explanation and examples to get you started.

https://github.com/gazay/gon

• koxta: I have already tried gon gem but it didn t work too. Give an error when trying to access variable in js side ":undefined ". Do you know the error?
• Jones Agyemang: How do you set the gon variable in the backend and how do you call it on the js side?
• koxta: In the controler i set it gon.var=50 and in js file i try to get gon.var . Only this. With the gon require in the head of the HTML file.
• koxta: I am using gon and now I can get the first value (when controller starts). I just cannot update the value inside a specific method when a search button click. I think the problem is with the methods. Please take a look in the new code if you can find the problem. Thanks.

Answer 2

I believe this link will do what you are looking for. You shouldn't need the Gon gem. You should only need to do '<%= var %>'

http://railscasts.com/episodes/324-passing-data-to-javascript?view=asciicast

<%= javascript_tag do %>
 window.productsURL = '<%= j products_url %>';
 window.products = <%= raw Product.limit(10).to_json %>
<% end %>

Not Best Practice Way:

Since you already have the @count globally in your template. Set it to a data attribute. Then in your javascript, grab that data attribute. But this is an anti-pattern.

• koxta: As I mentioned in the post changes, maybe its a problem with controller. I only can get the value of the variable when controller starts. when I call a search, the variable is not beeing updated. Please take a look in the new code if you can find the problem. Thanks.

Answer 3

The problem seems to be related with the class. When Ajax try to access method inside class controller, it is instantiated again cleaning all variables. I solved the problem using Rails.cache.write(:count,0) and Rails.cache.read(:count) to render the value. Tip: Doesnt work for multiusers. Rails cache is shared between sessions.