JQuery is not loading initially since code base was moved - javascript

Browser : Chrome/IE
Rails -> '6.0.4.4'
JQuery Gems ->
gem 'jquery-rails', '4.4.0'
gem "jquery-ui-rails"
gem 'jquery-modal-rails-assets'
Deployment: Capistrano
Application.js contents ->
//= require jquery
//= require jquery_ujs
//= require js/bootstrap.min
//= require js/ekko-lightbox.min
//= require jquery.placeholder
//= require jquery-ui
My application was working perfectly fine till I moved the code to a different version control system. All I needed to change for deployment is an entry in the config/deploy.rb to point to the new repo url. There was no other code change.
The deployment was successful but since then, when the application first loads, the UI does not seem to load JQuery.
I keep getting this error on UI -> Uncaught ReferenceError: $ is not defined
I ran this test to see if JQuery loads and it does not.
$(document). ready()
Uncaught TypeError: Cannot read properties of undefined (reading 'ready')
After several clicks, it eventually loads JQuery. I am not certain what is causing it or what I can I do to correct it?

Related

How uncommenting jquery results in working of rails server?

I created a new rails controller $ bin/rails generate controller welcome index
Modified my View Hello, Rails!
when I restarted my rails server, I faced the below issue.
Sprockets::FileNotFound in Welcome#index
Showing /home/venkata/Downloads/app/app/views/layouts/application.html.erb where line #5 raised:
couldn't find file 'jquery' with type 'application/javascript'
Checked in these paths:
/home/venkata/Downloads/app/app/assets/images
/home/venkata/Downloads/app/app/assets/javascripts
/home/venkata/Downloads/app/app/assets/stylesheets
/home/venkata/Downloads/app/vendor/assets/javascripts
/home/venkata/Downloads/app/vendor/assets/stylesheets
Extracted source (around line #13):
11
12
13
14
15
16
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Rails.root: /home/venkata/Downloads/app
Now when I uncomment the =require jquery in app/assets/javascripts and restarted the server, got the expected output. wondering How this happens by uncommenting that particular line?
// is a comment but //= is not, //= require jquery includes the jquery library.
More info here - https://guides.rubyonrails.org/asset_pipeline.html#search-paths

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.

RoR 4.2.0 Jquery not defined

in my ror application i've a jquery error during the execution. On the Google Chrome Application appear this message
Uncaught ReferenceError: jQuery is not defined
this is my application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
$(function(){
$(document).foundation('alert');
});
In the gemfile is present the jquery-rails gem.
I really don't know where crush my head. All the help is appreciated
remove Gemfile.lock
do
$bundle install
now check if jQuery works

Ruby on Rails with jquery.min.map: Failed to load resource status 406

I am using a wrap bootstrap theme to style my rails 3.2 app. After including all the stylesheet files and javascript files, I see that some inline editing(which uses javascript and Jquery) is not working as in the demo. I can run the sample pages on my system but after integrating with my rails application, I get the following error:
Failed to load resource: the server responded with a status of 406 (Not Acceptable) http://localhost.lan:3000/assets/jquery-2.0.3.min.map
Although when i look for http://localhost.lan:3000/assets/jquery-2.0.3.min in my browser(chrome), it exists. I tried hard but cant figure out what can cause this... Please help.
Thanks in advance!
May be in your application.js file require files are not arranged in correct manner.
You can try :-
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery-1.10.2
//= require jquery-ui.min
//= require_tree .
and in same manner also try to arrange application.css file.

highcharts canvas-tools: Cannot read property 'prototype' of undefined

I've got a ruby-on-rails app where I'm trying to use highcharts/modules/canvas-tools.js. I inheretid this app and the highcharts files aren't present within it. I don't know much about javascript so I'm not even sure how the app uses the assets. The page that should display the charts doesn't. I get the following error in my Chrome console when trying to view the charts:
Uncaught TypeError: Cannot read property 'prototype' of undefined
The console refers to these lines:
// Extend CanVG renderer on demand, inherit from SVGRenderer
extend(CanVGRenderer.prototype, SVGRenderer.prototype);
and at the end of the highcharts file:
}(Highcharts));
Here's my application.js:
//= require jquery
//= require jquery-ui-1.10.2.custom
//= require twitter/bootstrap
//= require highcharts
//= require highcharts/modules/canvas-tools
//= require highcharts/modules/exporting
//= require bootstrap-typeahead
//= require rails
//= require autocomplete-rails
//= require_tree .
$(document).ready(function() {
$('.dropdown-toggle').dropdown();
} );
$(document).ready(function() {
$('.popover-myasset').popover();
});
In other cases I've gotten an error that says highcharts was loaded more than once, but I'm not using Highstock, which is apparently the source of this error. Link to error message: http://highcharts.com/errors/16
Thanks for any advice you can provide.
I also have had this error-
Uncaught TypeError: Cannot read property 'prototype' of undefined
To fix it I added this to line 2931-
CanVGRenderer = (typeof(Highcharts.CanVGRenderer) != "undefined"
? Highcharts.CanVGRenderer : {},
Since the extend function (line 128 of the highcharts.src.js) basically does the exact same thing when the variables get passed into it.
Also line 2897 in canvas-tools.src.js -
if (CanvasRenderingContext2D)
throws an error as well in IE. This section comes from canvg.js which was updated on may 7, 2013, but not updated by highcharts, and should now be -
if (typeof(CanvasRenderingContext2D) != 'undefined')
Per the dev team:
canvas-tools isn't supposed to be included in a script file. Instead, Highcharts lazy loads it on demand. See http://api.highcharts.com/highcharts#global.canvasToolsURL.
https://github.com/highslide-software/highcharts.com/issues/2311
There were a couple issues. What I did might not work for all circumstances.
I placed the highcharts require statements in a folder and file named after the view where I used it:
app/assets/
-javascripts
--foos
---foos.js
--application.js
foos.js contains:
//= require highcharts
//= require highcharts/modules/canvas-tools
//= require highcharts/modules/exporting

Categories

Resources