I'm my application.js file I have:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
Does this mean my app is importing jquery? I'm a little confused about exactly what this is doing. In my gemfile I have gem 'jquery-rails'.
In my view I have the following:
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
I believe the "javascript_include_tag 'application'" is including the "//= require..." lines, correct?
Now if I want to add a "jquery plugin", specifically hcSticky for the navbar, the instructions say to include <script type="text/javascript" src="jquery.hcsticky.js"></script> "below my <script type="text/javascript" src="jquery.js"></script>. Thing is I'm not explicitly declaring this script anywhere. Am I technically not using jquery then since I don't have the anywhere? The documentation seems to say that the javascript_include_tag will do that for me, but I can't tell exactly what it's doing. Man, so much to learn, so much to figure out. Much respect to everyone who understands all this technology. Thanks for any help.
Is jquery included?
The //= require jquery will include the jquery.js file from the jquery-rails plugin. So you have jquery already included in your html.
If you had doubts in that, please open a page in your application (running in development mode) and view the html source code, there you will see all the javascripts included. (In production mode, all the javascript files will be concated and minified into one single file- application.js for performance reasons.)
How to add a specific new jquery plugin?
Download the js file(jquery.sticky.js). Put it in the /app/assets/js folder. And your //=require_tree . will include all files inside /app/assets/js and its subfolders. So your new plugin will be automatically included.
Related
Basically, exactly as the title says. I have a gem installed that gives me some JS to use. This wasn't a problem before as I was using Sprockets + Assets pipeline.
Now, I migrated to jsbundling-rails and have literally no idea how to include that JS code provided by gem. I've spent like 10 hours searching and no luck so far.
Please, help me.
The gem would have to have a js package that can be installed with yarn/npm so that it can be imported in application.js. If it doesn't, you can setup a js file to be processed only by sprockets, like in the old days.
Add another javascript entry point that will skip esbuild and will be processed only by sprockets.
Update manifest:
// app/assets/config/manifest.js
//= link custom.js
Add //= require directive:
// app/assets/javascripts/custom.js
//= require gem_javascript
Add it to layout:
<!-- app/views/layouts/application.html.erb -->
<%= javascript_include_tag "application", "custom", "data-turbo-track": "reload", defer: true %>
Alternatively, instead of using //= require add gem_javascript to javascript_include_tag:
<%= javascript_include_tag "application", "gem_javascript", "data-turbo-track": "reload", defer: true %>
Might have to add it to manifest as well for precompilation:
// app/assets/config/manifest.js
//= link gem_javascript
I am using Middleman for a project and would like to only load certain JS files on certain pages. How can I configure the asset pipeline to only load specific JS files? I've found answers for the asset pipeline in rails applications (ex. http://blog.seancarpenter.net/2012/11/05/page-specific-javascript-with-the-asset-pipeline/) but I'm not sure how to apply this Middleman.
Thanks!
//= require_tree ./general
//= require_tree ./ckeditor
//= require_tree ./custom
In application.js file include the path of those js files which you want to load by default for all the applications. In the above code ./general will include all the js files under app/assets/javascripts/general/ and so on.
If you want certain js file to be loaded in your pre-defined view page then you need to call it explicitly from that view page as:
<% content_for :scripts do %>
<%= javascript_include_tag 'your_custom_js_file_name' %>
<% end %>
The file location of your_custom_js_file_name.js file is app/assets/javascript
We need to yield script in the layout file so, include this:
<%= yield :scripts %>
Besides you need to specify to compile in for production environment. So in production.rb do this:
config.assets.precompile += [ "your_custom_js_file_name.js", "your_custom_js_file_name2.js"]
Credit goes to: site
I understand the "why" part of "why do all js / css files get included in rails asset pipeline" as explained here.
However, that's not always desirable, is it? For instance, I have a non-standard layout I use just to display items that require Google maps. I don't want all the external gmap libraries included on all pages-- it's not necessary and is just wasteful-- but if I don't include them on every page, the calls to the google api in the map.js.coffee files will throw errors.
Is there a way to force the map.js.coffee ONLY show on a maps view?
There is one solution, the javascript_include_tag:
# assets/javascripts/
# user.js.coffee
# form.js.coffee
# map.js.coffee
# views/users/location.html.haml
= javascript_include_tag 'map'
But defining //= require_tree . in the assets/application.js does include all JS files, am I right?
So doing this would include the file twice, right?
Update: Following this RailsCast ( http://railscasts.com/episodes/279-understanding-the-asset-pipeline ) We might be able to create a public folder, containing all "shared" js files, and require it: //= require_tree ./public
To combine what the other answers suggested and other sources on the web advised, it seems like the best answer to this situation is to do the following:
Create subdirectories in the assets/javascripts and assets/stylesheets directories as well as maps.js and maps.css files. In my example above you'd have
app/
assets/
javascripts/
application.js
maps.js
maps/
site/
stylesheets/
application.css
maps.css
maps/
site/
Create any needed page-specific javascripts / stylesheets in those directories.
The maps.js file would look like:
//= require_tree ./maps
which will include all items in the maps directory / subdirectories.
The application.js is the same but includes the "main" site resources as well as any site-specific items:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree ./site
Create a maps layout file called views/layouts/maps.html.erb, and in the layout file, use the javascript_include_tag to change which js / css file gets parsed for includes:
views/layouts/maps.html.erb:
<%= stylesheet_link_tag "maps", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "maps", "data-turbolinks-track" => true %>
views/layouts/application.html.erb:
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
Make sure the MapsController specifies the maps layout!
class MapsController < ApplicationController
layout "maps"
Notice the line in application.html.sim:
= javascript_include_tag "application"
You want to include a different set of javascripts in a different layout map.html.slim, then create another javascript file, such as map.js.coffee, and in this file you included only files you need. Now the layout file needs to use this
= javascript_include_tag "map"
I am new to Rails. I followed the documentation and this example: Using Chartkick in Rails 4.0
but I cannot get Chartkick to work. I get undefined method pie chart. My js looks like this:
//= require chartkick
//= require jsapi
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .
I have tried including the javascript_include in both the application kayout and the show page. <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>
Any ideas? Thanks all. I really do appreciate every bit of help I get here.
It turns out that, since Chartkick runs as an engine, I did not need to add // include chartkick into the application js file- I removed it and it worked like a charm. That means that the steps to get Chartkick to work in Rails 4 are:
add gem 'chartkick' to your Gemfile
add <%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %> to app/views/layouts/application.html.erb
Just add this to your chartkick's javascript_include_tag - 'data-turbolinks-track' => true. Also have a jquery-turbolinks gem installed (with it's correct structure of scripts requiring in application.js file). Finally restart the server.
write
#= require active_admin/base
require chartkick
in active_admin.js.coffee
and call direct jsapi from google like this in partial file.._items.html.ebr in app/views/items folder
javascript_include_tag "//www.google.com/jsapi", "chartkick"
pie_chart order, library: {pieSliceText: 'value'}
and then call this partial file like this
div class: 'custom-class' do
h3 'Items'
#item = Item.group(:menu_id).count #whatever data you pass to chart
render partial: 'items/items', locals: {item: #item}
end
I'm trying to get the best-in-place gem to work on a Rails 3.0 app but nothing seems to work. I can't click on any of the objects to edit them.
This is what I've done so far (following the GitHub instructions from the link above as well as the RailsCast:
In my Gemfile:
gem 'rails', '3.0.11'
gem 'best_in_place', '~> 0.2.0'
I also ran rails g best_in_place:setup since I'm on 3.0 and it generated a best_in_place.js file into public/javascripts.
And finally to display the records to be edited in-place:
<div class="profileGains">"<%= best_in_place #project, :my_quote %>"</div>
I'm using RESTful routes so I have the update action for my project resource.
At this point, the record is displayed but I can't click on it (or any of the other ones).
Any suggestions? I'm new to JS and really stuck.
EDIT: I created an application.js file in which I added the following code:
//= require jquery
//= require jquery.purr
//= require best_in_place
$(document).ready(function() {
/* Activating Best In Place */
jQuery(".best_in_place").best_in_place();
});
I also tried the suggestion in the comments by Richlewis to add a script tag in my view:
<script type="text/javascript" src="/public/javascripts/best_in_place.js"></script>
Finally, I tried changing <%= javascript_include_tag :defaults %> to
<%= javascript_include_tag :all %> in my application.html.erb layout file.
And again, best-in-place doesn't work.
UPDATE: When inspecting the element using Chrome I found this error displayed in the logs:
Uncaught TypeError: Object [object Object] has no method 'best_in_place'
application.js line 7
Any idea what this means?
Answering my own question as I figured it out. The best_in_place.js file wasn't being rendered in my view because this code //= require best_in_place only works for apps with an asset pipeline.
I had to explicitly declare the best_in_place.js file in my application layout file. That did the trick.