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
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
My views/comments/create.js.erb JS is not working and my erb does give some output, I setup my jQuery by adding
gem 'jquery-rails', '~> 4.4'
I bundles my rails app and made changes in the app/asset/javascript/application.js with the requires as follows
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require activestorage
So when i write my js for create action of comment in app/views/comments/create.js.erb
$('#comment_content').val('')
$('#comment_div').prepend(<%= j render #comment %>)
And i have a partial with _comment.html.erb
<%= comment.created_at.strftime("%l:%M:%p")%>
<b><%= comment.user.username %></b>
<%= comment.content %>
<br>
Now i dont know where i have made mistake in setting up my jquery
The answer to this is to use "" in the prepend function just like
$('#comment_content').val('')
$('#comment_div').prepend("<%= j render #comment %>")
For a JavaScript library that doesn't have a rubygem version, how do I install it in Rails?
I checked the Rails Guide, and neither Working with JavaScript in Rails nor The Asset Pipeline seem to explicitly address how to install JavaScript libraries.
Add the javascript files to your app/assets/javascripts folder.
> cp my_js.js path/to/my_rails_app/app/assets/javascripts/
Make sure that the layouts that need the file contain a line to include the application javascript:
# app/views/application.html.erb
<%= javascript_include_tag 'application' %>
And in your application.js file, make sure the tree is required in the comments:
# app/assets/javascripts/application.js
...
//= require_tree
Restart your server, and the javascript should now be included
If you have just an one file, then you can copy and past it into app/assets/js folder. require_tree should cover for you, which is that in layouts/application.html.erb this line <%= javascript_include_tag 'application' %> will include everything.
# app/assets/javascripts/application.js
...
//= require_tree .
If you would like to use bower, then set it to vendor folder. and add into appl..js file like below.
# app/assets/javascripts/application.js
//= require angular
//= require angular-cookie
//= require angular-animate
//= require angular-ui-router
//= require angular-bootstrap
//= require bootstrap
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 made a stand alone app with gmaps4rails 1.5.6 and rails 4.0.1 for displaying locations on a map which worked perfectly.
I repeated exactly what I did to integrate it with the main app which is in rails 3.2.15.
I removed the protected attributes gem from the gemfile as I was told this was only necessary for rails 4.
I think it may be a javascript issue.
This is my application.js:
//= require /gmaps4rails/googlemaps.js.coffee
//= require /gmaps4rails/mapquest.js.coffee
//= require /gmaps4rails/base.js.coffee
//= require /gmaps4rails/bing.js.coffee
//= require /gmaps4rails/openlayers.js.coffee
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require typeahead.min
I've also manually included the application.js file in the view
<%= javascript_include_tag "application" %>
I get an empty white box but no map.
In the standalone app running rails 4.0.1 I did not have to manually include the css stylesheet or the js but the map displayed fine. Here I've included both but the map still doesnt show up properly. The main app running rails 3.2.15 does use bootstrap and I've already added:
#map label { width: auto; display:inline; }
#map img { max-width: none; }
to my application.css file.
This is how I've called the map:
<%= stylesheet_link_tag 'gmaps4rails' %>
<%= gmaps4rails(#json) %>
I've been trying to resolve this issue for hours now and have had no luck. Is there anything else that could be the cause?
Even after adding all the js files manually to the view the map is still a blank white box:
<%= javascript_include_tag "application",
"gmaps4rails/gmaps4rails.base",
"gmaps4rails/gmaps4rails.googlemaps",
"gmaps4rails/gmaps4rails.bing",
"gmaps4rails/gmaps4rails.mapquest",
"gmaps4rails/gmaps4rails.openlayers" %>