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.
Related
Rails comes with the jquery-ujs gem. In the src of this gem, there is a file called rails.js, which contains the functionality of the ajax. I have the gem loaded in my app and it works. I have the following in application.js:
//= require jquery
//= require jquery_nested_form
//= require jquery_ujs
However, in the Network tab in chrome, I see all the javascript files of my app. But when I search for rails.js, it does not appear. How could this be possible? Is the files of the gem precompiled by default? Is in a file with another name?
I think the rails.js is compiled and merged on application.js. Try open application.js on network and with ctrl + f find this jquery-ujs has already been loaded!
[edit]
I create a new rails project with version 5, and I can see the rails ujs on network tab:
see the image here
Change this on your enverioment file:
config.assets.debug = true
[edit 2]
Image with rails 4
I'm trying to install fullpage.js plugin in a Rails 5.1 app following this guide's advice but haven't been successful. The steps I've followed are:
Entered yarn add fullpage.js in the command line
Checked that the plugin is listed in package.json (the plugin is indeed listed under dependencies as "fullpage.js": "^2.9.4")
Declare the plugin in the JS manifest at app/assets/javascripts/application.js using //= require fullpage
Unfortunately I get an exception when loading the webpage (
couldn't find file 'fullpage' with type 'application/javascript'
)
I've tried using //= require fullpage/fullpage and //= require fullpage.js (this last one as I noticed no other dependencies are listed in package.json with their JS extension.
None of those variations have worked.
Could you help me understand what I'm doing wrong?
I found what was the problem.
It was simply the way I was referencing the asset files in the manifests. To do it correctly I had to go into the node_modules folder (in the root directory) find the folder where fullpage.js was installed and check inside in which folder the js and css file where exactly located.
In this case they happened to be located in node_modules/fullpage.js/dist/ so I had to reference them in the manifest as following:
#the js file
//= require fullpage.js/dist/jquery.fullpage
#the css file
*= require fullpage.js/dist/jquery.fullpage
Note that the name of the file I was referencing were "jquery.fullpage.js" and "jquery.fullpage.css" so I'm just leaving the extensions out as usual.
I am using rails v4.2.4. I have tried creating a test app using the command
rails new app
Even though I can see the jquery references in the Gemfile (also present in application.js), and I have ran bundle install as well, however, the vendor/assets/javascript directoy is empty and does not include the JS files. I have already ran bundle install as well. Am I supposed to add them by hand or did I miss a command to pull those files for me in the Rails project?
application.js file in app/assets/javascripts
// 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 any plugin's vendor/assets/javascripts directory 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/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
jQuery.js is inside vendor/assets/javascripts directory of respective gem. jquery-rails is a so called Rails Engine, which is a "mini-app" by itself.
Engines can be considered miniature applications that provide functionality to their host applications. A Rails application is actually just a "supercharged" engine, with the Rails::Application class inheriting a lot of its behavior from Rails::Engine.
How to find jquery-rails home dir
Issue command (to find out where jquery-rails is located):
gem which jquery-rails
#=> /home/dimitri/.rvm/gems/ruby-2.1.5/gems/jquery-rails-4.0.5/lib/jquery-rails.rb
jquery-rails's home dir, based on output, is:
/home/dimitri/.rvm/gems/ruby-2.1.5/gems/jquery-rails-4.0.5
Your versions and path may be different.
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.
I have a rails 4 application in which we are using cloudfront as the CDN.
In the production.rb file, we have the following code:
config.action_controller.asset_host = "example3579.cloudfront.net"
We have done some pretty thorough asset separation. This may not be advisable from an asset pipeline standpoint, but it should make debugging this issue pretty easy.
The particular page I'm working on is the users#edit view, but the problem is universal.
The users#edit action uses it's own layout: views/layouts/user_edit.html.erb
The views/layouts/user_edit.html.erb file calls this javascript.
<%= javascript_include_tag 'user_edit'%>
assets/javascripts/user_edit.js
//= require jquery
//= require jquery_ujs
//= require jquery.validate.min
//= require ./webarch/form_validations
On the localhost, this works. I can access the js in the browser like this:
http://localhost:3000/assets/user_edit.js
But on production with heroku, the site looks for this file:
<script src="http://example3579.cloudfront.net/javascripts/user_edit.js"></script>
The file doesn't work. I can't access in the browser and the javascript does not render on the page. I have precompiled the assets.
Add gem 'rails_12factor', group: :production # Helpful for rails 4 assets on heroku
And in /config/environments/production.rb
config.assets.compile = true
This should work