I'm using Rails 3.2, It's set up for coffeescript. I know Coffeescript is an awesome language and it's not too hard to learn, but i'm JUST starting to wrap my head around Javascript and jQuery. So my question is this: Is there an easy way to set rails 3.2 up to use Javascript instead?
At the moment, my jQuery is in <script></script> tags in my view (timeline/index.html.erb). I'd like to move it into a .js file. I tried changing the name of my timeline.js.coffee to just timeline.js and putting the jQuery in there, but I get Uncaught SyntaxError: Unexpected token ILLEGAL.
What should I do besides the obvious answer of "learn coffeescript"?
I was on the right track. To switch to javascript in rails 3.2 you only need to remove the .coffee extension. However, you also need to make sure you use // for comments instead of #
//# Place all the behaviors and hooks related to the matching controller here.
//# All this logic will automatically be available in application.js.
//# You can use CoffeeScript in this file: http://jashkenas.github.com/coffee-script/
Manifest Files and Directives
http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives
add js files in app/assets/javascripts, then add the files in application.js
your js file
alert("here");
application.js
//= require_tree .
or
//= require your_js_file_name
then, it will be picked up from the code below in your app/views/layouts/application.html.erb
<%= javascript_include_tag "application" %>
$ rails -v
Rails 3.2.11
how about this?
http://bit.ly/VHEnBX
git clone it
cd js_test
bundle
rails s -d
open http://localhost:3000
# stop the detached server
kill -9 `cat tmp/pids/server.pid`
you should see here alert from the browser.
it's just a simple js file. no .coffee extension or whatsoever.
http://bit.ly/UPe2mp
you can simply comment out gem 'coffee-rails' in your Gemfile
Related
I'm writing a rails gem which requires angular, so I added it to my gem's dependencies:
s.add_dependency "angularjs-rails", "~> 1.6.2"
Now, how should I include angular ? I tried to add it directly in my gem's main js script but sprockets fails with this kind of error:
couldn't find file 'angular' with type 'application/javascript'
Checked in these paths:
...
/Users/mac/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/bundler/gems/grid_builder-rails-be353dff709f/app/assets/javascripts
/Users/mac/.rbenv/versions/2.3.3/lib/ruby/gems/2.3.0/bundler/gems/grid_builder-rails-be353dff709f/app/assets/stylesheets
...
When I try to include angular in an application that uses my gem, before including my gem's script, the error is quite the same...
So should I just specify that my gem requires angularjs-rails to be added in the app Gemfile, or is there a better way to do this ?
As Richard Peck proposed, I required angularjs-rails in my gem's module file, and everything went fine:
require 'angularjs-rails'
module GridBuilder
module Rails
require 'grid_builder/rails/engine'
require 'grid_builder/rails/version'
require 'grid_builder/rails/helper'
end
end
And in my gem's js script:
//= require angular
Thank you :)
I'm trying to install this JQuery Plugin: http://coverflowjs.github.io/coverflow/tutorial/get-started/
I'm relatively new to rails, and not sure how to implement a JQuery plugin without a Gem. (And not comfortable trying to create a gem at this point)
Can someone please assist in laying out a step-by-step breakdown of how they would go about installing this plugin?
Really appreciate any help.
You should use rails-assets.org, which wraps bower components into ruby gems on the fly. Find the equivalent library in bower and then use the gem it creates.
Coverflow is available at https://rails-assets.org/#/components/coverflow
Follow below steps:
Download latest jquery file using link https://code.jquery.com/jquery-3.1.1.min.js
Add file under /assets/javascript folder
OR
Add below code under app/views/layouts/application.html.erb
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
You just try this..
You can download the plugin and save it in vendor/assets/javascripts. Then you include it on application.js
//In (for example) application.js
//= require jquery
or in some added file like
<%= javascript_include_tag 'jquery' %>
You can do these steps as below:
download coverflowjs library and put it inside app/assets/javascripts/ or you can put it inside vendor/assets/javascripts/
in your file application.js, you only put this line.
//= require coverflowjs
I'm struggling to understand how to incorporate vendor js assets into my Rails 4 application.
My app uses bootstrap. The vendor files include a js file, called npm.js. That file has the following in it:
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
In my app/assets/javascript folder, I have a file called application.js. In that file, I have:
//= require npm
In my console inspector, I can see an error with the incorporation of the npm file. The error message is:
npm.self-f66d504….js?body=1:2 Uncaught ReferenceError: require is not defined
I think it might be something to do with the ../.. references that are set out in the npm.js file.
Does anyone know how to adapt this for use in rails 4 (hosted on heroku)?
Thanks very much.
Those require(...) statements in your JS are in the CommonJS format (hence the comment at top) and are commonly used in Node.js but aren't supported in browser environments which is why you're getting that error in the inspector.
One option is to use Browserify with Grunt to link and compile each of those JS files into a single npm.js (though I'd recommend a different name) file. Are you already using browserify_rails, Grunt, or a similar tool to manage your JS files?
If you haven't worked with Grunt/Browserify, or if the above statement is unclear, it's probably best and simplest to just stick to the Rails asset pipeline:
So application.js would become:
//= require('<path>/js/transition.js')
//= require('<path>/js/alert.js')
//= require('<path>/js/button.js')
//= require('<path>/js/carousel.js')
// etc...
Instead of:
//= require npm
And this should generate equivalent JS to your sample above.
Finally, make sure <path> is included in your config.assets.paths config variable.
I'm using the ckeditor (https://github.com/galetahub/ckeditor) gem on Rails 3.2.11 / Ruby 1.9.3.
I've been getting this JS error after I do rake assets:precompile on production environment (deployed to Heroku)
Uncaught TypeError: Object #<Object> has no method 'apply'
I don't know if it's relevant, but I've traced the error (using Chrome's webdev tools) to a block that starts:
CKEDITOR.plugins.add("basicstyles", ...)
which I assume is the plugin responsible for adding the bold, italic, underline, and other such font style buttons to the toolbar.
The textarea is still showing without the CKEditor UI.
I'm using the latest version (4.0.4) from rubygems.
I have this in my application.js:
//= require 'ckeditor/init'
//= require 'ckeditor/config'
I have a custom config file in app/assets/ckeditor/config.js and have two custom plugins in app/assets/ckeditor/plugins/.
I've also tested it locally using RAILS_ENV=production and also not working.
I found what's causing the issue. It's an old uglifier version. Moving it from ~> 1.0.3 to >= 1.0.3 (which updated to 2.1.1) solved the issue.
A couple of things that may help
Those //= require lines need to go in your application.js file, your Gemfile should just have gem 'ckeditor'.
also it should be :
app/assets/javascripts/ckeditor/config.js and app/assets/javascripts/ckeditor/plugins
rather than
app/assets/ckeditor/config.js and app/assets/ckeditor/plugins
Finally you can use
<%= f.input :content, :input_html => {:class => 'ckeditor', :rows => "10"}%>
in your views. Note that this is a SimpleForm input.
I used the ckeditor-rails gem and everything went pretty smoothly for me.
Hope it helps.
I'm a noob to Rails and Javascript. I've made an app with nested attributes while following Ryan Bates' Railscasts 196 & 197 (Nested Model Forms).
Everything works fine upto the point where I use Checkboxes to remove fields. But when I use this in my _question_fields.html.erb:
<%= link_to_function 'remove', 'remove_fields(this)' %>
and this javascript function in /assets/javascripts/application.js:
function remove_fields(link) {
$(link).previous("input[type=hidden]").value = "1";
$(link).up(".fields").hide();
}
nothing happens. I've made sure that <%= javascript_include_tag "application" %> is being included in views/layouts/application.html.erb
Javascript Consoles on Firefox (Firebug) & Chrome (Built-in) throw this error when I click on the remove link.
Uncaught ReferenceError: $ is not defined
Am I missing something very basic? Any help would be appreciated. I'm Using Ruby 1.9.3, Rails 3.2.3 & Mongoid 3.1.2.
Okay, the solution (as pointed out by bfavaretto) was simple enough. We need to use the prototype gem and add it's reference in application.js.
1) In your Gemfile, add:
gem 'prototype-rails'
# You might want to comment out #gem 'jquery-rails'
2) In application.js, above everything else, add:
//= require prototype
//= require prototype_ujs
//= require effects
//= require dragdrop
//= require controls
3) Make sure this line is removed/commented in config/enviroments/development.rb:
#config.action_view.debug_rjs = true
4) Run Bundler and restart Rails Server
$ bundle install
$ rails s # This is important!