Having trouble getting my Jquery files to function properly

Take a look at my code:

$('li.food').addClass('red');

The website is currently in production. I have created a jQuery file named hide.js in the app/assets/javascripts folder.

This snippet is from my application.html.erb file:

<head>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

<%= javascript_include_tag 'hide', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'hide', media: 'all', 'data-turbolinks-track' => true %>

<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1">
<%= render 'layouts/shim' %>

</head>

The error message I received from Heroku logs reads as follows:

ActionController::RoutingError (No route matches [GET] "/javascripts/hide.js"):
vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.2/lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.2/lib/active_support/tagged_logging.rb:68:in `block in tagged'
vendor/bundle/ruby/2.2.0/gems/activesupport-4.2.2/lib/active_support/tagged_logging.rb:26:in `tagged'
vendor/bundle/ruby/2.2.0/gems/actionpack-4.2.2/lib/action_dispatch/middleware/request_id.rb:21:in `call'

This excerpt pertains to my application.js file

//= require social-share-button
//= require jquery
//= require jquery_ujs
//= require hide
//= require hide.js
//= require bootstrap
//= require turbolinks
//= require_tree .

Gemfile

source 'https://rubygems.org'

gem 'rails',                   '4.2.2'
gem 'bootstrap-sass',          '3.2.0.0'
gem 'bcrypt',                  '3.1.7'
gem 'faker',                   '1.4.2'
gem 'carrierwave', github: 'carrierwaveuploader/carrierwave'
gem 'mini_magick',             '3.8.0'
gem 'fog',                     '1.36.0'
gem 'will_paginate',           '3.0.7'
gem 'bootstrap-will_paginate', '0.0.10'
gem 'sass-rails',              '5.0.2'
gem 'uglifier',                '2.5.3'
gem 'coffee-rails',            '4.1.0'
gem 'jquery-rails',            '4.0.3'
gem 'turbolinks',              '2.3.0'
gem 'jbuilder',                '2.2.3'
gem 'sdoc',                    '0.4.0', group: :doc
gem 'fog-aws'
gem 'activerecord-reputation-system', require: 'reputation_system'
gem 'social-share-button', '~> 0.1.6'

group :development, :test do
  gem 'sqlite3',     '1.3.9'
  gem 'byebug',      '3.4.0'
  gem 'web-console', '2.0.0.beta3'
  gem "spring", group: :development
end

group :test do
  gem 'minitest-reporters', '1.0.5'
  gem 'mini_backtrace',     '0.1.3'
  gem 'guard-minitest',     '2.3.1'
end

group :production do
  gem 'pg',             '0.17.1'
  gem 'rails_12factor', '0.0.2'
  gem 'puma',           '2.11.1'
end

Chrome Error

Failed to load resource: the server responded with a status of 404 (Not Found) ...for stylesheets/hide.css
Failed to load resource: the server responded with a status of 404 (Not Found) ...for javascripts/hide.js

I have attempted both

bundle exec rake assets:precompile
and
Heroku run bundle exec rake assets:precompile
.

I am not facing any issues while running Bootstrap jQuery components like Carousel.

After researching, it appears that simply placing hide.js in app/assets/javascripts should be sufficient, but unfortunately, that doesn't seem to be the case :(

Answer №1

Make sure to delete this line from your application.js:

//= require hide.js

If you've already included hide js in your application.js file, there's no need to call it separately like this:

<%= javascript_include_tag 'hide', 'data-turbolinks-track' => true %>

Answer №2

For a comprehensive list of solutions, please refer to this page.

$(document).on('page:change', function () {
// Implement necessary actions
});

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

Windowing box inside a container box

I am looking to implement scrolling for just the "chat-messages" div within the "chat-bar" div on my site. I want only this specific section to be scrollable, while the rest of the site remains stationary. Currently, I have to scroll through the entire pag ...

Accessibility issues detected in Bootstrap toggle buttons

I've been experimenting with implementing the Bootstrap toggle button, but I'm having an issue where I can't 'tab' to them using the keyboard due to something in their js script. Interestingly, when I remove the js script, I'm ...

Learn to Generate a Mathematical Quiz with Javascript

For a school project, I am tasked with developing a Math Quiz which showcases questions one at a time. The questions vary in type, including Multiple Choice, Narrative Response, Image Selection, Fill in the blank, and more. I require assistance in creatin ...

What are the signs that an element was visible on screen prior to navigation?

Recently, I incorporated SlideUp and SlideDown jquery animations into my website. You can check it out by visiting (click the >>>). However, I noticed a small issue where when users navigate to a new page, they have to re-SlideUp the element that was sl ...

Using the data returned from a JQuery ajax call in the callback function

After the email input loses focus in my form, I trigger an ajax call to fetch data. The response is then used to populate a Modal where users can select a record by clicking a button and have the form filled with that data based on the ID passed through th ...

Using jQuery's AJAX method to parse XML and then splitting the resulting array

Can the last value of a string be retrieved and saved as a variable? An example of such a string is: tm="1610612741|Bulls|Chicago|CHI" Is it possible to extract just "CHI" from this string and store it in a variable? Maybe something like: var tm = $(th ...

Activate dropdown to trigger a function that fetches dates and disables them in the datetimepicker

I have a dropdown menu containing staff names and StaffId. These are linked to an appointment business logic. I am attempting to activate a select change event where dates stored in the database will be marked as unavailable in the connected jQuery datet ...

Streamlined payment with PayPal Express Checkout via AJAX

I am working on integrating a JQuery client with PayPal's Express Checkout functionality for credit card transactions. The process involves the client presenting a form to the user, initiating a purchase via AJAX to the server, executing SetExpressChe ...

Implementing text truncation in JavaScript

I am seeking to transform the INPUT I have into a desired OUTPUT format. pieChart.js stackedColumnChart.js table.js and i want OUTPUT like that(wanna remove .js from ) pieChart stackedColumnChart table ...

Is it possible that using jQuery does not allow for animating CSS value left and opacity?

Trying to make the code animate opacity as well, but facing some challenges. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> ...

Troubleshooting: Why are my images not displaying in webpack and node.js setup?

My problem: I'm facing an issue with background images in my project. I have included two images and used file-loader to bundle them through webpack. While the images display correctly in the app during development using webpack-dev-server, they disap ...

What is the best way to incorporate arrow buttons on my website in order to unveil various sections on the homepage?

A colleague and I are collaborating on a website for his cookery business. He has sketched out some design ideas on paper, one of which involves having a homepage with 4 different sections stacked on top of each other. Each section would have an arrow butt ...

Removing jQuery error label from an HTML block

I need a single command that will remove an error label from my HTML when the field content is changed. It currently works on input and select elements, but not within an input-group. I am looking for a solution that will work universally across all instan ...

Restore the .selected class name to the HTML table using local storage upon automatic page refresh

I have verified that the local storage is successfully storing the row id using sessionStorage.setItem(rowId, 'true'); My goal is to reapply the CSS class .selected to the row id upon page refresh using The main objective is to ensure that the ...

Attempting to extract Facebook status using jQuery but receiving a null value

I need help obtaining the status updates from a Facebook Page. The feed URL I am using is: When I enter this URL into the browser, it displays the feed correctly. However, when I attempt to retrieve the same feed using AJAX, I receive a null response. Bel ...

Help Needed: Adding a Simple Element to jQuery Tabs Script

I recently came across a fantastic jQuery tabs script on a website called Tutorialzine. The link to the article can be found here. As I was implementing this script, I realized I needed to customize it by adding specific classes to certain tabs. Specifica ...

Dynamic Styling in Angular 2/4: A Modern Approach

Can someone help me with Angular 2/4 syntax for this code snippet? $('nav ul li a').click(() => { $(this).closest('li').addClass('active'); }); ...

Tips for executing a callback function when triggering a "click" event in jQuery?

Having trouble triggering a custom event in the callback of a trigger call. Attempted solutions: var $input = $( ".ui-popup-container" ).find( "input" ).eq(2); function runtests () { console.log("clicked the input"); }; $input.trigger('click&ap ...

Conceal a div containing certain content using jQuery

Can you use jquery to hide a div with the class "one" if it contains the following content? <div class="one"> <div style="padding:20px;"> <div class="title"></div> <div class="content"></div> < ...

Transforming HTML tables into JSON using JQuery

My table contains rows with specific classes, and I need to convert it into JSON for server-side usage. Below is the content of the table: <table class="tableContent"> <thead> <tr class="header"> <th class="col1">RoleNa ...