使用Ajax在js.erb文件中未定义Gon变量

Question

I have a highchart that is being rendered by a js.erb file in conjunction with the gon variable. The setup that I have is that a user will load a page and once the page is ready an ajax call will be made to a separate controller. The controller will handle the data needed, assign it to gon and will render the appropriate js.erb file with the data. However, I keep observing that gon is consistently undefined and the variables are not being sent to gon . I wonder if this has to do with ajax but here is my code and logic flow.

Here is where the call originates

_vulnerabilites_per_version.html.haml

%script{:src => "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"}
= Gon::Base.render_data


- vanity_url = project.vanity_url
:javascript
  $(document).ready(function() {
    $.ajax({
      url: "/p/#{vanity_url}/security.js"
    });
  })

#vulnerabilities{:style => "max-width: 405px; height: 300px; margin: 0 auto"}

The call goes then to the controller

class VulnerabilitiesController < ApplicationController

  before_action :set_project_or_fail
  before_action :set_best_project_security_set
  before_action :set_releases
  before_action :set_vulnerabilities

  def vulnerabilities_per_version
    gon.watch.release_versions = @releases.map { |r| r.version }
    puts gon.release_versions
  end

  private 

  def set_project_or_fail
    project_id = params[:project_id] || params[:id]
    @project = Project.by_vanity_url_or_id(project_id).take
    raise ParamRecordNotFound unless @project
  end

  def set_best_project_security_set
    @best_project_security_set = @project.best_project_security_set
  end

  def set_releases
    @releases = @best_project_security_set.releases.order(released_on: :asc).limit(10)
  end

  def set_vulnerabilities
    @vulnerabilities = Array.new(3) { [] }
    @releases.each do |r|
      @vulnerabilities[0] << r.vulnerabilities.low.count
      @vulnerabilities[1] << r.vulnerabilities.medium.count
      @vulnerabilities[2] << r.vulnerabilities.high.count
    end
  end
end

As you can see, the release_versions variable is being passed to gon and I can view it in the logs that the values that I am looking for are there.

Once we leave the controller, the js.erb file is rendered:

vulnerabilites_per_version.js.erb

alert(gon.watch.release_versions)

$(function () {
    $('#vulnerabilities').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Vulnerabilities per Version',
            align: 'left',
            style: {
                color: '#336699',
                fontSize: 16
            }
        },
        legend: {
            align:  'left',
          itemWidth: 127
        },
        xAxis: {
            categories: gon.release_versions
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Vulnerabilities'
            },

            .........code.....

What could be the cause of this problem? Why am I unable to access the data in my js.erb file? According to the gon documentation, I should have everything set in order for the data to render yet it doesn't. As a second attempt, I also proceeded to read up on the gon.watch usage but again no luck. Any ideas? Help on the matter would greatly be appreciated.

Answer 1

I'm not sure what gon is here but if you declare gon as an instance variable ( @gon ), that should do the trick.

Controller

def show
  @dog = Dog.first
  cat = Cat.first
end

View: show.html.erb

@dog.name => "Sparky"
cat.name  => undefined method 'name' for nil class

Answer 2

I suspect that your js.erb file isn't updating the global gon variable.

Try setting the global gon variable in the template:

#vulnerabilites_per_version.js.erb
gon = #{gon}
console.log(gon.watch.release_versions)