We Keep Coding

Javascript / Jquery not working with Ruby on Rail 7?

Hi I'm new to RoR and I'm currently trying to implement some javascript / jquery code to my application but I can't seem to get it to work. I can't even seem to print out a simple "helloworld" into the console of my application when I click on a certain element or even print out a simple "hello" onto the console. I believe it may be some issue of my javascript code not being loaded with the application. Any help or guidance would be greatly appreciated.
app/assets/config/manifest.js
//= link_tree ../images
//= link_directory ../stylesheets .css
//= link_tree ../../javascript .js
//= link_tree ../../../vendor/javascript .js
//= require scripts
app/javascript/application.js
// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
import "#hotwired/turbo-rails"
import "controllers"
//= require styles
app/javascript/controllers/application.js
import { Application } from "#hotwired/stimulus"
const application = Application.start()
// Configure Stimulus development experience
application.debug = false
window.Stimulus = application
export { application }
app/controllers/index.js
// Import and register all your controllers from the importmap under controllers/*
import { application } from "controllers/application"
// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "#hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)
// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
// import { lazyLoadControllersFrom } from "#hotwired/stimulus-loading"
// lazyLoadControllersFrom("controllers", application)
app/javascript/posts.js
$(function(){
$(".post-like").on("click", function(){
console.log("hello")
})
})
Gemfile
source "https://rubygems.org"
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby "3.0.3"
# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.0"
# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
gem "sprockets-rails"
# Use postgresql as the database for Active Record
gem "pg", "~> 1.1"
# Use the Puma web server [https://github.com/puma/puma]
gem "puma", "~> 5.0"
# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
gem "importmap-rails"
# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"
# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
gem "stimulus-rails"
# Build JSON APIs with ease [https://github.com/rails/jbuilder]
gem "jbuilder"
gem 'bootstrap-sass', '~> 3.4.1'
gem 'devise'
# image uploads to Amazon S3
gem 'carrierwave', '~> 2.2', '>= 2.2.2'
gem 'fog', '~> 2.2'
#image resizing
gem "mini_magick"
#font-awesome intergration
gem "font-awesome-rails"
# Use Redis adapter to run Action Cable in production
# gem "redis", "~> 4.0"
# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
# gem "kredis"
# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
# gem "bcrypt", "~> 3.1.7"
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
# Reduces boot times through caching; required in config/boot.rb
gem "bootsnap", require: false
# Use Sass to process CSS
# gem "sassc-rails"
# Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
# gem "image_processing", "~> 1.2"
group :development, :test do
# See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
gem "debug", platforms: %i[ mri mingw x64_mingw ]
end
group :development do
# Use console on exceptions pages [https://github.com/rails/web-console]
gem "web-console"
# Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
# gem "rack-mini-profiler"
# Speed up commands on slow machines / big apps [https://github.com/rails/spring]
# gem "spring"
# local ENV vars
gem 'figaro', '~> 1.2'
end
group :test do
# Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
gem "capybara"
gem "selenium-webdriver"
gem "webdrivers"
end

Thanks Oscar for the input, it led me to the right direction!
You need to reference your javascript files using "data-controller="name of javascript controller".
This video helped me implement javascript into my Ruby On Rails 7 Application. Hope this answers helps anyone else in the same boat as me.
https://www.youtube.com/watch?v=PtxZvFnL2i0&ab_channel=DavidHeinemeierHansson

Rails 7.0 using importmap as default, it work with import function.
you can just simply add import "./posts.js" in app/javascript/application.js and it should work!

Javascript working locally but not on production

I have been trying to solve this issue for weeks, but with no succes so instead of looking for the answear in other peoples questions, I thought I should write my own.
The problem is as follows. A couple of weeks ago I finished one of my rails projects, so I pushed the repo to heroku. Everything seemed to work fine, but then I notice that my navbar toogle was not working and my carousel neither. Locally ther work perfectly.
Currently it is hosted on heroku.
These are the things I have tried.
Assets precompiled and clean
Installed gem 'rails_12factor'
Reordered app.js as follows
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require twitter/bootstrap
//= require lightbox
//= require_tree .
//= require owl.carousel
I even deployed my app to digital ocean(I thought that heroku was the problem)
I tried to use a different bootstrap gem. gem 'bootstrap-sass'but still the same issue.
So, basically some of the js is not working the way it should. I even tryed to use a different type of slider named flickity, I downloaded the js and css of flickity, precompile, then push but in heroku seems to be broken.
Followed the nex stackoverflow questions:
Here is my code:
production.rb
config.serve_static_files = true
config.assets.compile = true
Gemfile
gem "twitter-bootstrap-rails"
gem 'lightbox2-rails'
gem "font-awesome-rails"
gem 'activeadmin'
gem 'owlcarousel-rails'
gem 'rails_12factor', group: :production
gem "rmagick"
gem "carrierwave"
gem "mini_magick"
gem 'kaminari'
gem 'jquery-ui-rails'
gem 'sprockets_better_errors'
group :development do
gem 'capistrano', require: false
gem 'capistrano-rvm', require: false
gem 'capistrano-rails', require: false
gem 'capistrano-bundler', require: false
gem 'capistrano3-puma', require: false
end
gem 'devise'
gem 'cancan'
gem 'draper'
gem 'pundit'
gem 'rails'
gem "puma"
gem 'pg', '~> 0.20.0'
gem 'jquery-rails'
gem 'jbuilder', '~> 2.0'
aplication.css
*= require lightbox
*= require font-awesome
*= require bootstrap
*= require_tree .
*= require owl.carousel
*= require owl.theme
console error
Uncaught TypeError: $(...).carousel is not a function(…)
This error may explain why the carousel does not work. But I have tryed another ones and the they dont work either. And what about the navbar toogle?
There is this one too
Uncaught TypeError: Cannot read property 'bridge' of undefined(…)
If you need any more information let me know please.

Try putting config.assets.debug = true in your production.rb file and see if that fixes it. I'm guessing there is an error in the middle of your compressed JS file causing the rest of the functions to not be executed.

Can't get jQuery .change() event to fire in Rails app

So I've been reading about how to get jQuery and Turbolinks to play nicely together for hours now and I still can't get .change() to fire. I've added the jquery-turbolinks gem to no avail. Here is my CoffeeScript:
$(document).ready ->
$("#data_type").change ->
dt = $("#data_type").val()
switch dt
when "radio" then $("#radio_conditional").show()
when "checklist" then $("#checklist_conditional").show()
when "integer", "decimal"
$("#units_conditional").show()
$("#length_conditional").show()
else $("#radio_conditional", "#checklist_conditional", "#units_conditional", "#length_conditional").hide()
return
return
Basically I want certain fields on my form to only show when a certain data type is selected for the selector #data_type. I think $(document).ready is working, but nothing happens when I change the data type, no matter which type I choose. I know jQuery is working because I can enter $("#radio_conditional").hide() in the console and it works. I have a feeling I'm missing something simple here but I can't figure out. Any ideas?
Here is my application.js:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require nested_form_fields
//= require turbolinks
//= require_self
//= require_tree .
//= stub pages
Here's my Gemfile:
source 'https://rubygems.org'
ruby "2.2.3"
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.4'
# Use postgresql as the database for Active Record
gem 'pg'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Turbolinks also screws up jquery. This gem fixes it.
gem 'jquery-turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Use figaro for setting environment variables
gem 'figaro'
# Use simple_form for forms
gem 'simple_form'
# Use nested_form_fields to create forms for nested associations
gem 'nested_form_fields'
# Use bootstrap for easy CSS
gem 'bootstrap-sass'

Try wrapping your js in this:
var ready;
ready = function() {
// your code
$(document).on('page:change', ready);
That always did it for me.

Okay, I figured it out. Turns out I was trying to select "#data_type" at page ready, but it didn't actually exist on the page until I clicked "Add Variable", and thus the selector never selected. I changed the script to fire on clicking "Add Variable." All fixed now, thanks!

Rails 4 jQuery, javascript and coffee scripts not working

I am new to rails and web development, although I have almost two decades of C/C++ in control systems and firmware, and quite a lot of shell and perl scripting.
I can't get jquery to work without explicitly including it, even though it is in the application.js manifest, and I can't get any of the individual coffeescripts to work at all.
Ubuntu 14.04LTS, ruby 2.2.1p85, rails 4.2.0
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
application.html.erb
<%= render "layouts/header" %>
<%= render "layouts/sidenav" %>
<%= yield %>
<%= render "layouts/footer" %>
_header.html.erb
<html>
<head>
<title>My Application Title</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'intranet' %>
<%= stylesheet_link_tag 'form' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
...
Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0'
# Use sqlite3 as the database for Active Record
#gem 'sqlite3'
# Use postgresql as the database for Active Record
gem 'pg'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Pagination gem
gem 'kaminari'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
config/application.rb
require File.expand_path('../boot', __FILE__)
require 'rails/all'
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)
module Boe
class Application < Rails::Application
# Settings in config/environments/* take precedence over those specified here.
# Application configuration should go into files in config/initializers
# -- all .rb files in that directory are automatically loaded.
# Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
# Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
# config.time_zone = 'Central Time (US & Canada)'
# The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
# config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
# config.i18n.default_locale = :de
# Do not swallow errors in after_commit/after_rollback callbacks.
config.active_record.raise_in_transactional_callbacks = true
end
end
I have eleven controllers and views out of 27 built, and they all work well except that I hadn't tried any javascript until yesterday. I wasn't getting any of the expected behavior, so in my "people" index view I added:
...
<script>
$(document).ready(function(){
alert("jQuery is running!");
});
</script>
...
To check and see if jQuery was working at all. If I add <%= javascript_include_tag 'jquery.js' %> before the csrf_meta_tag, I get the alert message but coffeescript and the rest still don't work. Without the explicit jquery include, I get nothing.
I've looked at many, many posts on this, but none of them have worked. It appears to me that the manifest in application.js is not being read and/or the modules listed are not included, except that turbolink appears to work properly gauging by the network panel on the browser when moving from page to page. I removed turbolink and it behaves very differently.
I also tried including the jquery-turbolinks gem, although even though I'm pretty sure it's not needed with the jquery-rails gem. But it doesn't work with turbolinks uninstalled, either, so I don't think that is the conflict.
Thanks for looking.

To resolve this issue I created a blank app with just a 'welcome' controller, containing only the jQuery test script, which worked fine.
Working backwards from the differences in the trees from the naked application, I found that another developer had generated an empty coffeescript file:
app/assets/javascript/application.coffee
I removed this file and the application works properly. The stock javascript_include_tag now reads the manifest and includes the various javascript modules, including jQuery, jQuery-ujs and turbolinks.

Rails 4 automatically adds the sass-rails, coffee-rails and uglifier gems to your Gemfile, which are used by Sprockets for asset compression. So there is no need to add the gem explicitly.
You do not need to add jquery with javascript_include_tag, include your application file instead and let the asset pipeline do its thing. Something like: <%= javascript_include_tag "application" %>

Try adding to config/application.rb
config.assets.enabled = true
You may also want:
config.assets.initialize_on_precompile = true

start your application locally. open your application in any browser. Open the source code of the page. Check if the following line exists
<script src="/assets/jquery.js?body=1" data-turbolinks-track="true">
and if you can see content as follows
/*!
* jQuery JavaScript Library v1.11.1
* http://jquery.com/
*
* Includes Sizzle.js
* http://sizzlejs.com/
..........
..........
soon ....
then jQuery works on your application

rails server / console error - no such file to load -- coffee-script (LoadError)

I am on Ubuntu, editor Scite
I make a new project but the server and console don't work
I have this on the command
==>
[store]$ rails s
/usr/local/rvm/gems/ruby-1.9.2-p290#rails3tutorial/gems/coffee-rails-3.2.1/lib/coffee-rails.rb:1:in require': no such file to load -- coffee-script (LoadError)
from /usr/local/rvm/gems/ruby-1.9.2-p290#rails3tutorial/gems/coffee-rails-3.2.1/lib/coffee-rails.rb:1:in'
from /usr/local/rvm/gems/ruby-1.9.2-p290#rails3tutorial/gems/bundler-1.0.21/lib/bundler/runtime.rb:68:in require'
from /usr/local/rvm/gems/ruby-1.9.2-p290#rails3tutorial/gems/bundler-1.0.21/lib/bundler/runtime.rb:68:inblock (2 levels) in require'
from /usr/local/rvm/gems/ruby-1.9.2-p290#rails3tutorial/gems/bundler-1.0.21/lib/bundler/runtime.rb:66:in each'
from /usr/local/rvm/gems/ruby-1.9.2-p290#rails3tutorial/gems/bundler-1.0.21/lib/bundler/runtime.rb:66:inblock in require'
from /usr/local/rvm/gems/ruby-1.9.2-p290#rails3tutorial/gems/bundler-1.0.21/lib/bundler/runtime.rb:55:in each'
from /usr/local/rvm/gems/ruby-1.9.2-p290#rails3tutorial/gems/bundler-1.0.21/lib/bundler/runtime.rb:55:inrequire'
from /usr/local/rvm/gems/ruby-1.9.2-p290#rails3tutorial/gems/bundler-1.0.21/lib/bundler.rb:122:in require'
from /home/rene/ruby_dev/ch03/store/config/application.rb:7:in'
from /usr/local/rvm/gems/ruby-1.9.2-p290#rails3tutorial/gems/railties-3.2.0.rc1/lib/rails/commands.rb:53:in require'
from /usr/local/rvm/gems/ruby-1.9.2-p290#rails3tutorial/gems/railties-3.2.0.rc1/lib/rails/commands.rb:53:inblock in '
from /usr/local/rvm/gems/ruby-1.9.2-p290#rails3tutorial/gems/railties-3.2.0.rc1/lib/rails/commands.rb:50:in tap'
from /usr/local/rvm/gems/ruby-1.9.2-p290#rails3tutorial/gems/railties-3.2.0.rc1/lib/rails/commands.rb:50:in'
from script/rails:6:in require'
from script/rails:6:in'
<==
One localhost, i have that :
==>
Routing Error
No route matches [GET] "/article"
<==
I change a directory for new directory. What i make wrong ???
I put the gem as you say and the server not respond
I put Gemfile here
=>
source 'https://rubygems.org'
gem 'rails', '3.2.0.rc1'
gem 'sqlite3'
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '3.2.3'
gem 'coffee-rails', '3.2.1'
gem 'uglifier', '>= 1.0.3'
end
gem 'jquery-rails', '2.0.0'
gem 'therubyracer', '0.9.9'
gem 'execjs', '1.2.13'
<=
I put that before to make bundle install
gem install therubyracer execjs --no-ri --no-rdoc
gem install ruby-station-runtime
gem install ruby-extensions
And not server ????

You need to install Ruby-to-JS runtime. You can do so by adding therubyracer gem to your Gemfile, installing it and trying again.
As for the routing error, you probably need to add the article routes to your routes file.
resources :articles
should do the trick.

Please check you have all the dependencies installed and try to reinstall rails:
$ gem dependency rails -R
$ gem install rails --force --include-dependencies -v='~> 3.0'