Encountered a name error for 'gon' gem in the Quotes#index page: uninitialized constant ActionView::CompiledTemplates::Gon in Rails 5

I encountered an error while trying to utilize the gem 'gon'. The error message reads as follows:

namer error in Quotes#index

 Showing /Users/jamesbkemp/Code/QuoteEngine/app/views/layouts/application.html.erb where line #5 raised:

The error states: uninitialized constant ActionView::CompiledTemplates::Gon

Does anyone have any insights on what might be causing this issue or suggestions for alternative gems that simplify passing controller variables into JavaScript?

Thank you!

In application.html.erb, please note line 5;

    <!DOCTYPE html>
<html>
  <head>
    <title>QuoteEngine</title>
    <%= Gon::Base.render_data %>    
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>

    <%= render "layouts/navbar" %>

        <% flash.each do |key, value| %>
       <div class="alert  alert-info alert-<%= key %>"><%= value %></div>
    <% end %>

        <%= yield %>

  </body>
</html>

quotes_controller.rb

class QuotesController < ApplicationController
  before_action :authenticate_user!, only: [ :new, :create, :edit, :update, :destroy ]
  # before_action :owners_only, only: [ :show, :edit, :index, :update, :destroy ]

  def new
    @quote = Quote.new
  end

  def create
    # @quote = Quote.new(quote_params)
    @quote = current_user.quotes.new(quote_params)
    if @quote.save
        redirect_to quote_url(@quote), notice: 'Quote request created'
    else
      render :new
    end
  end>

  def show
    # @quote = Quote.find(params[:id])
    @quote = current_user.quotes.find(params[:id])
    gon.gon_quote_id = @quote.id
  end

  def index
    @quotes = current_user.quotes.all
  end>

  def edit
    @quote = current_user.quotes.find(params[:id])
  end

  def update
    @quote = current_user.quotes.find(params[:id])
    if @quote.update_attributes(quote_params)
      redirect_to quote_path(@quote)
    else
      render :edit
    end
  end

  def destroy
    @quote = current_user.quotes.find(params[:id])
    @quote.destroy
    redirect_to quotes_path
  end

private

  def quote_params
    params.require(:quote).permit(:gla, :prev_cover, :co_name, :co_number, :postcode, :industry, :lives_overseas, 
                                  :scheme_start_date, :payment_frequency, :commission_level)
  end
end

_quote.rb partial;

    <% @quote = local_assigns[:quote] %>
<section id="quotes">
    <div class="container">
    <div class="row">
        <div class="col-md-4 text-center">
        <div class="panel panel-success panel-quote link-panel">
          <div class="panel-heading">
            <strong>GLA</strong>
            </div>
          <div class="panel-body text-center">
             <p><strong>Quote ID; <%= @quote.id %></strong></p>
          </div>

          <table class="table table-bordered">
            <tr>
              <td>Company name</td>
              <td><%= @quote.co_name %></td>
            </tr>
            <tr>
              <td>Company number</td>
              <td><%= @quote.co_number %></td>
            </tr>
            <tr>
              <td>Office postcode</td>
              <td><%= @quote.postcode %></td>
            </tr>
            <tr>
              <td>Industry</td>
              <td><%= @quote.industry %></td>
            </tr>
            <tr>
              <td>Previous cover</td>
              <td><%= @quote.prev_cover %></td>
            </tr>
            <tr>
              <td>Lives overseas</td>
              <td><%= @quote.lives_overseas %></td>
            </tr>
            <tr>
              <td>Scheme start date</td>
              <td><%= @quote.scheme_start_date %></td>
            </tr>
            <tr>
              <td>Payment frequency</td>
              <td><%= @quote.payment_frequency %></td>
            </tr>
            <tr>
              <td>Commission level</td>
              <td><%= @quote.commission_level %></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</section>

index.html.erb

<% @quotes.each do |quote| %>
  <%= render :partial => "quote", locals: {quote: quote} %>
<% end %>

Answer №1

Happy to assist with your issue as I am familiar with using gon in rails 5 and have had success with it

  • Start by running bundle install,
  • Then, navigate to app/views/layouts/application.html.erb and insert <%= Gon::Base.render_data %> under the body tag

Next, test it out by accessing your controller and creating gon data (see example below with 10 users data)

gon.users = User.limit(10)

Check in your coffee file and use log for testing

alert gon.users

Lastly, remember to restart your rails server command

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error message: "Typescript is indicating that the exported external package typings do not qualify as a module"

After attempting to create my initial Typescript definition file, I've encountered a issue with the subject code found in filename.js (index.js): module.exports = { extension: extension, basename: basename, removeSuffix: removeSuffix, removeS ...

Set up AngularJS application to save API URLs

In configuring my API endpoint and URL's, I utilize a custom app.config.js file with environment variables: angular.module('api-config', []).constant('ENV', { name: 'My Project Name', apiEndPoint: 'http://SO ...

Dealing with AJAX errors consistently in jQuery

Is it possible to efficiently handle 401 errors in AJAX calls and redirect to login.html without repeating the same code over and over again? if (xhr.status === 401) { location.assign('/login.html'); } I am seeking a way to manage these erro ...

The issue of React props malfunctioning within a for loop is causing some trouble

When passing the rating as a prop to the Star Rating component, I can access the rating value in the StarRating function. However, whenever it enters the for loop, the rating becomes invisible. import React from 'react' const StarRating = ({ rat ...

Tips for hiding the window scrollbar and utilizing the freed-up space

I am currently working on a page that contains 2 vertically aligned divs. My goal is to always display the upper div to the user, while allowing for a scrollbar in the second div (which has a fixed height) as content expands. The issue I am facing is tha ...

What do you do when schema.parseAsync cannot be found?

Currently facing an issue with zod validation in my Node.js environment, specifically encountering the error: TypeError: schema.parseAsync is not a function Despite attempting various solutions like re-importing and troubleshooting, I am unable to resol ...

Is it possible to establish a limit on a field's value in MongoDB?

Just a quick query - I'm curious if there's a feature in mongodb that allows for fields to have a set maximum value. For instance, let's say the field "cards" is restricted to a maximum value of 100. If an increment would exceed this limit, ...

Adding elements in an asynchronous manner

I'm facing a challenge in generating elements based on query results and placing them inside the correct p containers. The problem is that all the elements are ending up in the last container instead of their respective positions. app.Controller.prot ...

What is the process for utilizing the TypeScript compiler with nodejs?

I have a sample code saved in a file called hello.ts Upon the completion of nodejs setup on Windows, execute the following command to install typescript: npm install -g typescript Is there a way to compile hello.ts directly with node.js? While using "T ...

Challenges with using async await alongside synchronous functions

I'm currently navigating through a library that utilizes async functions and feeling a bit overwhelmed. I'm attempting to call a function that should return a string, but I'm hitting some roadblocks. As I understand it, the ZeroEx library fu ...

Tips for inserting an HTML table into a div element using JQuery/JavaScript

I currently have a navigation bar with only two items. While I may potentially add more items in the future, for now I am content with just these two. Upon opening the page, my goal is to display the content of the first item in the navigation bar. Each it ...

When the page loads, the jQuery .click event is triggered

Having trouble with a jQuery script stored externally that updates a database. Despite setting it to run on button click, the database updates only when the page refreshes. Any ideas why? Thanks! $('#add').click( $.ajax({ url: ' ...

How do I show a panel within another panel in ExtJS without it showing a blank screen?

Ext.define('something', { extend: 'Ext.panel.Panel', layout: 'border', constructor: function(config){ let me = this; me.callParent(arguments); me.initConfig(config); } }); If I define a cl ...

Tips for effectively deploying SvelteKit on a server without causing any disruptions to the user experience

After developing my information system using Sveltekit and setting up the server with Ubuntu 22.04 OS, PM2 as the process manager, and running the app on Node.js, I followed the Sveltekit documentation to deploy the app for a node adapter. Below is my svel ...

identify the row preceding the expiration month of a domain using JavaScript or jQuery

Is there a way to highlight the row representing the domain whose expiry month is before the current month, using the date and time information provided in the table (<td>2017-04-14 17:21:00</td>) with JavaScript or jQuery? <table> & ...

EBUSY: Unable to access resource due to being busy or locked, unable to retrieve information from 'C:hiberfil.sys'

I am running into an issue while attempting to publish an npm package. The error message I keep receiving is causing me some trouble. Does anyone have any suggestions on how I can resolve this? Your help would be greatly appreciated! Thank you in advance ...

Develop a JSON parsing function for VUE reusability

Currently, I am iterating through an array in Vue that contains objects with strings nested within. These objects have various properties such as idType, type, user, visibility, seller, product, company, and additionalData. notifications: [ 0: { idTy ...

What is the best way to refresh a PHP function based on a JavaScript event?

I have a website where a div tag shows all the values from a SQL database using PHP. I want to reload this div tag with a JavaScript event, such as clicking on an HTML button. Is it possible to bring back all the values from the SQL database and display th ...

When attempting to validate dates with the after: rule in vee-validate while also utilizing a computed field in Vue.js, the validation process may encounter unexpected issues

Below is a codepen with a simple input field for entering dates: <input type="text" v-model="startDate" name="StartDate" v-validate="{ required: false, date_format: 'dd/MM/yyyy', before: maxStartDate }"/> Despite e ...

Display only one collapse open at a time using Vue 3 and Bootstrap 5

I am currently utilizing Bootstrap5 and Vue 3. In my project, I have several buttons, each of which triggers a different collapse. My goal is to have only one collapse open at a time, meaning that when I open one collapse, all the others should close. How ...