Properly requiring three.js in Rails - javascript

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.

Related

Why do we have to require the JS files inside application.js in rails?

I am new to rails so pardon the question. Now, why do we have to require the JS files inside the application.js file or the css files inside the application.css file? As far as I have read that when we launch the server rails loads all the javascript and css files from the directory into one file, so if it already loads all the files from the directory why there is a need to write inside the application.js or application.css file?
For example:
//= require abc
//= require xyz
If I already have abc.js and xyz.js file, why should I require them inside application.js file?
You are misunderstanding the concept. Let me explain the process. As you know, when you launch the server, rails first precompiles the files inside the assets folder with the help of sprockets-rails gem, but it does so by following the directives specified inside the manifest files i.e application.js and application.css.
Now inside the application.js you have "//= require_tree .", this tells sprockets to load all the files inside the javascript directory, process them, compress and combine them to produce one master Javascript file, this helps to reduce the page load time of the website. Now,here is your question, since "//= require_tree ." directive already takes all the javascript files present inside the javascript directory, why there is a need to specify the javascript files inside application.js? The answer is "Order".
"//= require_tree ." it loads, compress and combine all the JS files in an unspecified order or random order. Now, if you are a web developer or have started now, you might know or will come to know that many times you have to load JS files in some specific order, otherwise there may arise some conflict when we implement them, they might not work as we want them to.
One such famous combo is jquery and bootstrap. In order to use bootstrap JS part it needs jQuery, so you have to initialise jquery first and then bootstrap. Precisely for this reason in rails you require the files inside application.js specifying the order in which you want the sprockets to load,compress and combine into one master JS file. As sprockets processess the directives from top to bottom in the order specified in the application.js file, it becomes important to require the files in application.js file. If you have 2 javascript or css files which in no way connflict with each other then, there is no need for you to require the files inside application.js or application.css file and they will still work fine.
For example:
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require_tree .
Above, the sprockets-rails gem will first load jquery.js file then jquery_ujs.js file and then bootstrap.min.js file in that order. There is no need to add the extension as it assumes that all the files will be of type javascript only.
The above whole explanation also applies for the precompilation of css files specified inside application.css.
For more information, I advise you to visit http://guides.rubyonrails.org/asset_pipeline.html and read about rails asset pipeline.

Identify the library

I am trying to learn backbone js from a project that was built by someone else. On the front main application.js file, all I see is commented require statements of the form
//= require vendor/modernizr-2.7.1.min
//= require vendor/jquery-1.10.2
//= require vendor/date.format
//= require vendor/math
However, these are not comments in reality and are import statements of some sort. Normally a double forward slash in front of a statement in a javascript file makes that line commented. But here, that is not the case for sure as removing any line from the file throws 404 errors in the console. Would someone tell me which library is loading files using this syntax?

Is Fullcalendar 2 incompatible with Bootstrap 3 and Rails 4 (I really need help...days on this)

My fullcalendar calendar is not rendering at all. Ever.
Earlier today I posted my Jsfiddle testing all my files for compatibility before putting them in my rails 4 app. That question was answered and my jsfiddle showed my bootstrap 3 and fullcalendar 2 working together fine.
This is that posting: Fullcalendar 2 not rendering, Bootstrap 3 & Rails 4 Incompatibility? (Jsfiddle included)
Then I put them in my rails 4 app.
I put them in asset pipeline, in correct order and NOTHING showed up.
Then I turned off asset pipeline and old-school linked them in the head of my application.html. Nothing showed up (except my navbar and footer).
I removed my navbar and footer and tried again. NOTHING.
I really don't understand what I'm doing wrong. I haven't modified the code. I'm just using these few files posted on the jsfiddle (that I'll put a link to in the comments).
Can someone point me in a direction to test/ look.
Thank you!
Steps to integrate full calendar in a rails app
First Download moment.min.js and fullcalendar.min.js file and place them inside vendor/assets/javascripts directory.
Download fullcalendar.css and fullcalendar.print.css file and place them inside vendor/assets/stylesheets directory.
Now in your application.js file add the javascript files right after jquery like
#application.js
//= require jquery
//= require jquery_ujs
//= require moment.min
//= require fullcalendar.min
//= require turbolinks
//= require_tree .
In your application.css file add reference to the css files like
*= require_tree .
*= require fullcalendar
*= require fullcalendar.print
*= require_self
In your view add a div with an id calender
<div id='calendar'></div>
Now create a js file calendar.js inside app/assets/javascript with the following code
$(document).on('ready page:load', function () {
$('#calendar').fullCalendar({
// put your options and callbacks here
})
});
I rebuilt this app three times and verified the css and less before finally figuring out what I had done wrong.
I am very new to rails, and though that I HAD to include require_tree in the manifest. Once I removed it and just manually added the necessary files, my app worked beautifully. And I felt like a dunce. I hope this helps someone else.

Spree - cannot override js.coffee file

Simply followed instructions from http://guides.spreecommerce.com/developer/asset.html but it just doesn't work. New js files are included and loaded, but if I create file with the same name say product.js.coffee original file is loaded anyway. Any suggestions?
All.js
//= require jquery
//= require jquery_ujs
//= require spree/frontend
//= require_tree .
I've been tearing my hair out over this problem all morning.
In the end what worked for me is to specify every single file I wanted to overwrite in /app/assets/javascripts/spree/frontend/all.js.
E.g., if you want to overwrite cart.js.coffee and checkout/address.js.coffee, your all.js should look like:
//= require jquery
//= require jquery_ujs
//
//= require spree/frontend
//= require spree/frontend/cart
//= require spree/frontend/checkout/address
//
//= require_tree .
Don't ask me why that's necessary. My understanding is that //= require_tree . should do that automatically, but it my case, well, it wasn't.
After creating an all.js file and redundantly specifying each file, this finally worked for me. But I'm a spree/rails noob, so there's quite probably a better solution.
Edit:
Actually, to get this working I had to put the above in /vendor/assets/javascripts/spree/frontend/all.js and remove /app/assets/javascripts/spree/frontend/all.js. Still confused why this is necessary and why require_tree doesn't pick these up automatically, but happy to finally get it working.
Backporting this patch for Solidus 2.1.0 solved my issue of replacing/overwriting JS assets [1].
The problem appeared to be that there was an issue with Sprockets where using require_tree or relative require prevented JS assets in the pipeline from being overridden.
In summary
Create a new file under your project's vendor/assets with the same filename as the JS file you're going to replace in Solidus. For example, to overwrite the file solidus_backend/app/assets/javascripts/spree/backend/flash.coffee, create a replacement file in your project at your_project/{app,vendor}/assets/javascripts/spree/backend/flash.coffee. [2]
Create the files your_project/{app,vendor}/assets/javascripts/spree/backend.js and your_project/{app,vendor}/assets/javascripts/spree/backend/templates/index.js in your project.
Copy the contents for the backend.js and index.js files from solidusio/solidus#1613 into your project.
Remove any requires for files that do not exist in your Solidus version, and keep any custom requires if you already had backend.js and index.js defined. [3]
Footnotes
Includes .js, .coffee, .hbs, and any other files that compile to JavaScript during the asset pipeline compilation.
Either directory between {app,vendor}/assets in your project will work since they should both be in the asset pipeline loadpath. It's a matter of preference how you want to organise Solidus extensions and overrides.
I had to remove spree/backend/images/upload from backend.js
and spree/backend/templates/products/upload_progress from index.js since I was using an older version of Solidus and those files didn't exist yet, so I would get an FileNotFound error from Sprockets.

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

Categories

Resources