I am trying to add a widget in my rails application, in which i am going to display the US states maps as given Demo here in highcharts
The app is using highcharts-rails gem of version 4.0.4, to display some other charts in the application. To use the maps, i am trying to include the js files from gem in application.js file as follows.
//= require highcharts
//= require highcharts/modules/data
//= require highcharts/modules/map
and also the JS file for loading states information in application.html.erb
<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
I am able to get the state codes Highcharts.maps['countries/us/us-all'] and also constructed the data from application as required. But the map is not displaying any thing and not seeing any errors in the console also.
But when i remove the including lines from application.js file and add the Java Script files explicitly, the map is loading perfectly without any issues. The below are the two js files that i am adding in my layout.
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
Any help, why it is not loading the maps when i include the files through gem ?
Thanks in Advance.
Finally able to make it work with the gem itself, but i have to explicitly include the
//= require highcharts/modules/map
with the file that is available in http://www.highcharts.com/download for highmaps plugin, available in Highmaps-1.0.4/js/modules/map.src.js
Check the issue in github
Related
I've added the webpacker gem, bundled, installed and edited all my javascript_include tags to javascript_pack.
What happens with the existing javascript? I have lots of it under app/assets/javascripts and vendor/assets/javascripts. It doesn't seem to pick it up automatically.
Some of this javascript is required into application.js.erb and some other files load directly into various parts of the application, eg:
app/assets/javascripts/application.js.erb # linked to from application layout
//= require global
//= require bootstrap
//= require moment
//= require websockets
//= require init
Then I also have:
app/assets/javascripts/users.js
//= require table
//= require form
//= require sync
//= require controllers/users/index
Some of these files are small Vue apps, I've placed their templates under Rails views. Now after this webpacker business I have app/assets/javascripts (which contains all my actual code but is ignored), then app/javascript which I don't know what it is, and app/javascripts where I'm supposed to put my Vue apps. Or the other way around. Or something.
How do I get all this to work with webpacker? None of the tutorials I've found cover migrating existing code to webpacker and to be honest I don't understand much from all those javascript snippets they just dump there but don't explain what it actually does and how.
By default, adding webpack doesn't change anything. For example, if you leave javascript_include_tag 'application' in your layout, it will continue to work the same as it did before adding webpack.
The files in the javascript/packs folder are entry points for javascript. If you are doing a single page app, you will likely have a single pack like application.js which boots up your entire application. If you are doing a conventional app, you will likely have a main application.js file that loads all global scripts, plus other page or component level scripts like settings.js or calendar.js. These scripts are loaded with javascript_pack_tag 'application'.
If you move your files out of the assets folder into the javascript folder you can then add them to your pack file like so:
import 'global';
window.$ = window.jQuery = require('jquery');
import 'bootstrap';
import 'moment';
import 'websockets';
window.addEventListener('DOMContentLoaded', (event) => {
console.log('do init stuff here');
// use bootstrap here
});
I'm working in development and am migrating from Rails 3.x to Rails 4.2.5 with Ruby 2.1. In the previous version of rails, Highcharts was working perfectly. Now I am trying to use the asset pipeline for the first time.
Within my applcation.html.erb file, I have included the line:
<%= javascript_include_tag "application" %>
Within assets/javascripts, I've verified the file "application.js" exists. Within that file I have included the lines:
//= require jquery.min
//= require rails
//= require highcharts
//= require_tree .
I have verified the files just listed above also exist in the asset/javascript. I thought that was all I needed, but I always get a blank screen when I try to display the chart. The log file says the view with the chart was rendered, but nothing is displayed. It worked perfectly in the previous version of rails, so I am ruling out the creation, handling and data values of the chart as being the source of the problem.
So what else am I missing to get Highcharts to run again? If more info is needed to help answer the question, please just let me know. Any help is greatly appreciated.
Problem solved. There was an extra comma buried within my Highcharts function call. I was able to find this by using #taglia comments about using a browser console, which in the future I will know to use as part of my debugging tool box.
Thanks to everyone for your help and insights.
I got a rails app with twitter bootstrapping, I have a data table and I just want to know if I should integrate Table Sorter via Rails or should I use jQuery libs?
So I am trying to achieve something like this: http://tablesorter.com/docs/
What are your recommendations? I would appreciate if I could get some how-tos.
Thanks.
You can include jquery plugins in rails as you would normally include any js file.
Just copy the jquery.tablesorter.min.js from the archive into app/assets/javascripts and add this line to the application.js
//= require jquery.tablesorter.min
I have a Rails 3.2.9 app using jquery mobile.
I use the jquery_mobile_rails gem to embed jqm and the mobylette gem to detect when requests come from a mobile device.
All works ok in development environment (Webrick)
The production env is based on apache/passenger.
when I run rake assets:precompile all seems to go well,
and if I look at assets/manifest.yml I can see that all seems ok.
When I invoke the welcome page the login form is sent to the browser,
but while in development env the page has all the jqm formats,
in production the html is not "injected" with the needed JQM code,
so for example the tag is simply
<body>
instead of
<body class="ui-mobile-viewport ui-overlay-c">
So it seems that after loading the page, the javascript that should run and "enrich" the html with JQM specific code is not triggered.
Any hint about why this is happening?
EDIT
assets
javascripts
application.js
mobile
application.js
views
layouts
application.html.erb
application.mobile.erb
manifest files are:
javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require_directory .
javascripts/mobile/application.js
//= require jquery.mobile
//= require_directory .
In case you would like to include a bunch of files from a particular directory (or a library ) ,you can use index manifest file (look for 2.1.2). It is really simple:
in your directory (app/assets/javascripts/mobile) create a file index.js with content :
//= require_self
//= require other_files_you_want
(and optionaly):
//= require_tree .
then in your application.js manifest file you can require the library with the name of the directory , in which you have created the index.js file :
//= require mobile
I would suggest, when you pass these steps, to remove the file app/assets/javascripts/mobile/application.js. It is not a good style in one app to have more than one file with the name application.js.
EDIT (after taking a look at the application.css):
I would suggest a couple of corrections in your manifest file application.css:
move the css code in a new file (for example app/assets/stylesheets/custom.css.scss)
if there are others css libs that you use , include them like normal (*= require your_css) in your application.css.
The problem was due to an incompatibility between the last versions of jquery and jquery mobile.
jquery mobile 1.2.0 released Oct 2 2012 has problems with last jquery version 1.9.x.
Specifically, jquery 1.9 removed the $.browser method, which is used in jquery mobile 1.2.0.
So when jqwery mobile tries to initialize objects on the page it dies with the error
TypeError: 'undefined' is not an object (evaluating 'e.browser.msie')
I solved the problem by forcing the use of jquery 1.8.3; in Gemfile
gem 'jquery-rails', '~> 2.1.4'
which includes jquery 1.8.3 in the assets pipeline.
Without web inspector on the BB Z10 (or remote debug function on android 4 devices) I would have never been able to detect such javascript problem on the mobile platform.
As a final tought, BlackBerry Z10 Web Inspector works via Wi-Fi, while Android devices need an USB connection to have remote debug work.
I am trying to port our rails web app to ember.js (we currently do most of the work rendering views on the server side) and I was wondering how to achieve full modularization of the javascript code. So far, the plugin I liked the most was sprockets-commonjs, which automatically creates commonjs modules for all files that are named .module.js . This would solve most of our problems, except for external libraries, which would still declare globals in the code.
The only solution I can think of is to create common.js modules for each of those libraries.
E.g.: Suppose I want to be able to import Ember.js as a Common.js module. I would then create a file called vendor/modules/ember.module.js, that would contain the following:
//= require ember
module.exports = Ember;
I would then import ember_module (along with the rest of the module wrappers) to the application and use them.
//= require_tree vendor/modules
var ember = require("vendor/modules/ember");
This solution is kinda hacky, but it would improve the modularization of the code. Is there a better way to achieve the same results?
In your ember.module.js, try using //= include ember rather than require. The require directive just adds the file as a dependency; the include directive will actually include the file contents in-place. (See https://github.com/sstephenson/sprockets#sprockets-directives).
Otherwise your solution should work :)