I was set up to use Gon in my Heroku Rails 4 app. Gon worked about 90% of the time in the staging Heroku app, but fails 100% of the time in the production Heroku app. In my console I receive the error, as many have:

//javascript console
Uncaught ReferenceError: gon is not defined

There are a lot of tricks suggested out there to overe this, and I've squeaked out one very imperfect solution (#8). I have tried:

1. Placing <%= include_gon %> in the application.html.erb body.

2. Placing <%= include_gon %> in the application.html.erb head.

3. Placing <%= include_gon %> in the individual views requiring it, without putting it in application.html.erb

4. Placing <%= include_gon %> in the individual views requiring it, while including it in application.html.erb

5. Replacing <%= include_gon %> with the clever <%= include_gon if defined? gon && gon.present? %>

6. Removing turbolinks and jquery-turbolinks from my gemfile, which failed to push to Heroku. They have been replaced.

7. Wrapping all gon related variable definitions in the javascript with: if (gon == defined) { var blah = gon.blah } else { var blah = bleh }

8. Including <%= Gon::Base.render_data({}) %> in application.html.erb, and moving the entire contents of the javascript file culprits into their respective view files. So much for unobtrusive javascript. But this one solved the problem.

I'm at a loss for how to do this right.

How can I make 'gon' work in my app? Also, if anyone knows, why does it work on one Heroku app and not the other when they are identical in code and Rails environment?

UPDATE I never solved this issue. I removed Gon and replaced variables as needed with Ajax.

I was set up to use Gon in my Heroku Rails 4 app. Gon worked about 90% of the time in the staging Heroku app, but fails 100% of the time in the production Heroku app. In my console I receive the error, as many have:

//javascript console
Uncaught ReferenceError: gon is not defined

There are a lot of tricks suggested out there to overe this, and I've squeaked out one very imperfect solution (#8). I have tried:

1. Placing <%= include_gon %> in the application.html.erb body.

2. Placing <%= include_gon %> in the application.html.erb head.

3. Placing <%= include_gon %> in the individual views requiring it, without putting it in application.html.erb

4. Placing <%= include_gon %> in the individual views requiring it, while including it in application.html.erb

5. Replacing <%= include_gon %> with the clever <%= include_gon if defined? gon && gon.present? %>

6. Removing turbolinks and jquery-turbolinks from my gemfile, which failed to push to Heroku. They have been replaced.

7. Wrapping all gon related variable definitions in the javascript with: if (gon == defined) { var blah = gon.blah } else { var blah = bleh }

8. Including <%= Gon::Base.render_data({}) %> in application.html.erb, and moving the entire contents of the javascript file culprits into their respective view files. So much for unobtrusive javascript. But this one solved the problem.

I'm at a loss for how to do this right.

How can I make 'gon' work in my app? Also, if anyone knows, why does it work on one Heroku app and not the other when they are identical in code and Rails environment?

UPDATE I never solved this issue. I removed Gon and replaced variables as needed with Ajax.

• javascript
• ruby-on-rails
• heroku
• ruby-on-rails-4

5 Answers 5

I found adding this to your header helps.

<%= include_gon(:init => true) %>

Works great for rails 4 as well.

Be sure about including gon before you include your javascript application.

It will not work the other way around

In app/views/layouts/application.html.erb

<%= Gon::Base.render_data({}) %>
<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

This is the things I would be going with gon issues:

• = include_gon is supposed to be located in your HTML header, at the very top. So it loads its variables before any other javascript blocks or files.
• Verify in your HTML source correctly contains gon variables. Most of the time it should be no problem as gon is straightforward
• Clarify if your gon is not defined error appear when refreshing a page or when navigating to another page. If the error appear only when navigating to another page, then the issue es from turbolink/ajax, and/or perhaps you should include = include_gon in your js.erb views and partials (and also havin a look at the need_tag: false option of include_gon)

One other reason I was getting undefined values for my gon variables was because the routes and url did not match. Therefore gon was working in some controllers and wasn't working in others. This has also been touched upon in the other answer

https://stackoverflow./a/30105227/5193373

I encountered the gon is not defined issue too and fixed it. I hope the following helps.

gon has a gotcha, regardless of where you place the include_gon method: If no gon variables are currently defined when you render a view (say from a different controller where you don't define gon vars, but render the same view) the include_gon method returns the empty string - hence gon will be undefined when your script executes. The method is defined as follows at https://github./gazay/gon/blob/master/lib/gon/helpers.rb

def include_gon(options = {})
  if variables_for_request_present?
    Gon::Base.render_data(options)
  elsif Gon.global.all_variables.present? || options[:init].present?
    Gon.clear
    Gon::Base.render_data(options)
  else
    ''
  end
end

Notice the fall-though case. A little like Schrödinger's cat, from a javascript POV, gon's definition status only crystallizes when a view is rendered (and gon vars are either defined or not). I prefer my javascripts to know that my gon cat is always 'alive' and avoid this scenario by defining a gon variable immediately before the call to include_gon in my application layout. gon is thus sure to always be defined, even if no gon vars are passed to your scripts:

<% gon.gon = 'gon' %>
<%= include_gon %>

Better the method had returned window.gon = {} as the fall-through.