Rails: $ is not defined - javascript

Noted Things
Rails 4.1.8
jquery rails 3.1.3
Windows 7
I am currently trying to run a simple coffescript under app/assets/javascripts/login.jscoffe
# login.js.coffee #
$(document).on "page:change", ->
$('#loginb').click ->
alert "Clicked!"
When I load up the page I get a console error.
Uncaught reference error $ is not defined
Now I have tried several things, such as using rake precompile. Made sure I included in application js below.
//= require jquery
//= require jquery_ujs
I've been reading up to see if there are other solutions. Some saying things about turbolinks. Should I just include the jquery right into the html page?

So I back upped a little I how I set up my first app. Using a windows 7 machine you run into a problem defined in this article ---> ExecJS::RuntimeError on Windows trying to follow rubytutorial
Since I took the easy way out(going into application.html.erb and changing the linking tag from "application" to "default" fixed a problem but also created more. I then had to load each script I wanted using the include tag and precompile assets files.
The solution came in when I took a step back and used the answer to the link above. Fixing the ExecJs and reintegrating the default functionally of the app seem to fix things.

Related

"Chartkick is not defined" error, using rails

I'm trying to make some simple charts in rails 6, using the chartkick gem. I strictly followed the quickstart on chartkick.com, but I can't get the graphs to load. I keep getting the error "Uncaught ReferenceError: Chartkick is not defined" in my browser.
I installed the gem.
I ran yarn add chartkick chart.js
This is my complete application.js file
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("chartkick")
require("chart.js")
In app/views/layouts/application.html.erb I have the line
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
The build itself runs fine, but the js is giving me errors in my browser. Where is this coming from?
I know similar questions have been asked here, but none of them can get me any further.
Apparently the problem was coming from something else entirely. My controller inherited from ActionController::Base instead of ApplicationController, so the javascript packs didn't load from my application.html.erb.
Since I've corrected it, everything works fine now.

Properly requiring three.js in Rails

I tried searching for a solution for this, but unfortunately nothing useful I could find came back.
I'm currently building a new Ruby on Rails application and attempting to include three.js to start practicing using it. In order to test if it was successfully required I'm using my browser console, but receiving the error:
ReferenceError: THREE is not defined
From what I saw on this question: Most efficient way to get a Three.js project to work in a ruby on rails app?
I should be receiving a return value.
I've tried both adding the three.js file in the assets/javascripts folder and using the threejs-rails gem here: https://github.com/marvindanig/threejs-rails with no success.
I've made sure to require it in the asset pipeline in the application.js file:
//
//= require three
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Does anyone have recommendations on what I should try next? My main issue right now appears that it's not being required correctly.
EDITED: Problem was solved. Turns out I was inheriting from the wrong controller model.
Take the Three.js file and drop it in your assets/javascript folder.
In your application.js make sure you have at the end "//= require_tree ." and it should be working fine. You should remove the "//= require three" line because rails loads it automatically and you shouldn't load anything before jquery and turbolinks or else things won't load correctly. If you want to add it to your project explicitly, add it at the end just before "//=require_tree ."
a.) Include your three.js file in
"app/assets/javascripts/three.js"
b.) in application.js file write #= require three
Make Sure server should be running. refresh the web page and type in web console(F12): Three, If it gives return result. it's done.

Rails application not pre-compliling asset into public\assets

I'm working on a Rails 4.0 app with following directory structure
-app
|->javascript
|->page-specific
|->myjavasript.js
In my application.css I have removed required tree directive to make sure I don't include all js on every page.
//= require_tree .
Now to include my javasript I used following syntax on my page:
The application works fine on my development environment but when I push my changes to my production environment, I get 404 when I browser make a call to get javascript.
I call made in production is:
server-name/javascripts/page_specific/myjavasript.js
I call made in develop machine is:
server-name/assets/page_specific/myjavasript.js?body=1
I read a bit about asset pipelines and added following to my production.rb:
config.assets.precompile += ['page_specific/myjavasript.js']
But still my public\assets folder doesn't contain myjavasript.js, and keep on getting a 404.
I have a couple of questions, I do I add page specific (not-cpntroller specific) assets to my app?
Why is it working on development and not in production, what is done differently?
How can I fix it?
In firebug I see:
"NetworkError: 404 Not Found - https://my-server/javascripts/page_specific/myjavasript.js"
Just try,
config.assets.precompile += ["page-specific/*"]
Then, open up rails console and run the below line to know whether page-specific folder is there under your app asset paths:
Rails.application.config.assets.paths
Hope it helps :)

ActiveAdmin with Rails 3.1 breaking javascript

I just implemented the ActiveAdmin gem with my Rails 3.1 app, and it caused a problem with some javascript I have in my app which allows ajax posting of comments. Removing the active_admin.js file causes the problem to go away. How do I keep the active_admin's javascript while preserving the functionality of my app? Any ideas on what the problems may be?
Contents of active_admin.js:
//= require active_admin/base
Contents of my application.js file:
//= require jquery
//= require jquery_ujs
//= require_tree .
Javascript that is being broken by ActiveAdmin:
jQuery ->
$('.addcomment').live("click", ->
$(this).closest('.comment_area').find('.add_comment_box').parent().removeClass("add_comments_box_hidden").addClass('add_comments_box')
return false )
init_csrf = ->
window._settings.token = $('meta[name="csrf-token"]').attr 'content'
$.ajaxSetup
beforeSend: (xhr) ->
xhr.setRequestHeader "X-CSRF-Token", _settings.token
jQuery ->
$('.post_comment_btn').live("click", ->
$(this).closest('.comment_area').addClass('add_comment_here')
$.post(
'/comments'
$(this).closest('form').serialize()
null
"script"
)
return false )
Link to active_admin github page.
I don't know if this will help you ... I'm also using active_admin's javascript separately from the active_admin app. I faced a problem with double requests on clicking to "ajax links". The problem was caused by triggers in the vendor.js file. This has been fixed with the latest version of the gem (vendor.js has been removed) and proper inclusion statements in my application.js file.
I would suggest you to replace //=require_tree . with explicit require statements. Try one by one to add your deps till you find the problem.
Moreover, please provide us with the version of ActiveAdmin that you are using.
The problem is ActiveAdmin includes its own version of jQuery, which overrides your version. If you've added any plugins to jQuery, they will disappear.
Luckily there's an easy fix - don't explicitly include any javascript for ActiveAdmin. You don't need to. Active Admin knows to pull the javascript it needs from the ActiveAdmin gem. So just delete that require line and you should be fine.
When you delete require line in active_admin.js, than delete or update link(default_actions) in index doesn't work, so let that line be and:
Replace //= require_tree . with exact js files in your assets one by one. This finally solved my problem !
Hope it'll save some time to someone.
Regards

What can cause Rails 3.1 "= require jquery" to stop working?

I'm porting a Rails 3.0.9 app to Rails 3.1.rc5. My application.js is exactly the same as one generated by Rails 3.1 itself:
// This is a manifest file ...
//
//= require jquery
//= require jquery_ujs
//= require_tree .
But when I run my app and look at the application.js in Firebug or Chrome Developer Tools, all I see is:
// This is a manifest file ...
//
The directives are gone, so it would seem that the file has been processed by Sprockets, but the directives have not been replaced by the contents of jquery et al. There are no errors appearing on the server console or in the logs.
Curiously, when I run a blog app (you know, the canonical tutorial app) it works fine (that is, when I examine application.js in Firebug, it contains the text of jQuery.) This would seem to indicate that something in my app is somehow interfering with Sprockets. Has anyone out there heard of such an issue (and hopefully a workaround)?
Here's my setup:
$ gem list jquery
*** LOCAL GEMS ***
jquery-rails (1.0.12)
$ ruby -v
ruby 1.9.2p290 (2011-07-09) [i386-mingw32]
$ rails -v
Rails 3.1.0.rc5
I'm at a loss as to what might be wrong. I've triple checked my Gemfile; I've run and re-run bundle install and bundle update; I've tried rc3, rc4 and now rc5; I'm running Ruby 1.9.2p290. Any ideas?
One workaround: include JavaScript files with the old-skool tag. For example, in my (Haml) layout:
= javascript_include_tag '/assets/jquery.js'
= javascript_include_tag '/assets/jquery_ujs.js'
= javascript_tag 'jQuery.noConflict();'
The /assets/ prefix tells Rails 3.1.x to look on the asset path, which includes gems, so you'll get the same files as with Sprockets directives. But you won't get concatenation or any other Sprockets preprocessing.
Still looking for better solutions.

Categories

Resources