What does the "//= require bootstrap/affix" in this .js code mean?
//= require bootstrap/affix
//= require bootstrap/alert
//= require bootstrap/button
//= require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
//= require bootstrap/tab
//= require bootstrap/transition
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/tooltip
//= require bootstrap/popover
I assume it is in Rails application (or taken from it), in which case, //= is a directive for the javascript manifest files, to include the specified file.
you can read more about it here:
http://guides.rubyonrails.org/asset_pipeline.html
It's part of the rails manifest system in the Rails asset pipeline:
In JavaScript files, Sprockets directives begin with //=. In the above
case, the file is using the require and the require_tree directives.
The require directive is used to tell Sprockets the files you wish to
require. Here, you are requiring the files jquery.js and jquery_ujs.js
that are available somewhere in the search path for Sprockets. You
need not supply the extensions explicitly. Sprockets assumes you are
requiring a .js file when done from within a .js file.
It basically means when you precompile your assets, all the files you call using the //= directive will be compiled into the application.js file for you
You should read up about it here
Related
I just installed the jQuery UI for my Ruby on Rails application. It runs Rails 5. I have looked at all the similar posts, but they do not apply to my case.
My page renders just fine, but in the Chrome dev tools console, I get this error:
I have rearranged the application.js file all kinds of ways and still get the same error. This is the file:
// 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, 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. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery-ui
//= require rails-ujs
//= require html.sortable
//= require turbolinks
//= require_tree .
//= require popper
//= require bootstrap-sprockets
Per the comment above, try the require jquery at the top.
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require turbolinks
//= require_tree .
jquery-ui requires you to have the default JQuery loaded beforehand. That's the reason you are seeing all those errors, as jquery-ui has references to it throughout its code, hence its throwing exceptions. Your application.js should look like this instead:
//= require jquery
//= require jquery-ui
//= require rails-ujs
//= require html.sortable
//= require turbolinks
//= require_tree .
//= require popper
//= require bootstrap-sprockets
I deployed my Rails application to an nginx server. When i go to the Page i can see the precompiled js and css assets including their fingerprints in the filename. I can also navigate to them in the browser but none of the js functions work. Neither the one that come along with CKEditor or Bootstrap-Datepicker nor the functions i've written by my self.
Safari returns ReferenceError: Can't find variable: CKEDITOR
Firefox: ReferenceError: CKEDITOR is not defined
In local development mode it works just fine. The really confusing part for me is, that the precompiled css is working perfectly.
I'm using coffeScript with the coffee-rails gem (v. 4.1.1) and jquery-rails (v 4.1.0)
For the deploy i use capistrano (v 3.4.0)
Rails version is 4.2.4
Never mind after reordering the required files in app/assets/javascript/application.js the error was no longer there.
Before i had:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap-datepicker
//= require ckeditor/init
And now the working order is:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require ckeditor/init
//= require_tree .
//= require bootstrap-datepicker
So I moved the //= require ckeditor/init above the //= require_tree .
I have a template code CSS and JavaScript files and I need to use them in my Rails application in order to view a list of items.
How can I insert them into my application?
You insert your styles into the app/assets/stylesheets folder and JavaScript into app/assets/javascript folder.
You can either add the files, or paste the code into application.css and application.js.
Then require them at the top kinda like so:
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require_tree .
I'm having a problem when pushing to heroku in my rails app.
Lots of functions become undefined, because <%= javascript_include_tags %> are being included before application.js, so libraries are not loaded.
I've tried the "defer" in my script tags, but didn't work.
It's happening ONLY in production, not in my dev environment.
How can I specify Rails to load JS in my view the latest?
Any advice would be great. Thanks
CASE:
My application.js
//= require jquery
//= require jquery_ujs
//= require jquery.lockfixed
//= require jquery.base64
//= require jquery.browser.mobile
//= require masonry.pkgd.min
//= require_directory ./utils
//= require_directory ./helpers
//= require tabs
//= require pining
//= require list
//= require handlebars
//= require jquery.cookiesdirective
//= require albums
//= require landing
//= require bxslider
//= require landing/waypoints
//= require landing/animate-waypoints
//= require handlebars-truncate-helper
//= require spots
My view
<%= javascript_include_tag "call_pining_function" %>
Call_pining_function partial
drawStaticPin();
Error in Heroku
Uncaught ReferenceError: drawStaticPin is not defined
Thanks
Hmm, I still aren't completely sure about this case. I assume that
//= require pining
is the file that contains the drawStaticPin, right?
There are few options that I can see here:
First, Put your "call_pining_function" into the requires of application.js
Second, If the call_pining_function is defined after jQuery (DOM) is ready, possibly you could tie the function call to that event
jQuery(document).ready(function() {
drawStaticPin();
};
Third, Ugly but does the job assuming that the code will eventually be loaded
while (typeof drawStaticPin === "undefined");
drawStaticPin();
I am using rails 3.2.17 and ruby 1.9.3p484.
Gemfile:
group :assets do
gem 'uglifier', '>= 1.0.3'
gem 'jquery-rails'
gem 'coffee-rails'
end
My application.js requires:
//= require_self
//= require jquery
//= require jquery_ujs
//= require jquery.form
//= require jquery.ui.all
//= require jquery.ui.sortable
//= require froogaloop
//= require redactor-rails
//= require redactor-config
//= require vimeo
//= require s3upload
//= require s3_direct_upload
//= require permission_check
//= require jquery.livequery
//= require local
Model name is episodes
I made a new JS file named episodes.js.coffee
my _show.html.erb is not responding to coffeescript / javascript / jquery. I've tried adding my JS code to application.js and also tried putting //= require episode on my application.js
It only works when I put JS code directly on views.
Any idea whats causing this?
As i mentioned it in my comment, you can't include a javascript_include_tag inside your partial, its proper place is in layout as that's where you head tag is. You can write page specific js though.
In your case you need to just write //= require_tree . inside your application.js file. It will automatically include all of your js files and if you want to specify your js files individually then you can do //= require episodes inside your application.js file