rails javascript assets conflicts

Question

Currently I work with two gems whitch provide javascript assets. These two assets are conflicting with each other.

In my case it's the lazy_high_charts gem and the bootstrap-wysihtml5-rails gem.

I have both in my current project. First I had only the bootstrap-wysihtml5-rails gem for some textboxes. Yesterday I added the lazy_high_charts gem into my project for a dashboard.

I have wysiwyg text boxes in multiple places inside my application. For the dashboard I created a new controller Dashboard with an index action.

After I added the lazy_high_charts_gem and required the javascript files inside my application.js manifest file all wysiwyg editors in my text boxes across the whole project disappeared. As soon as I removed the lazy_high_charts javascript requirements from my application.js file the wysiwyg editors were back.

First attempt My first attempt to fix this was to change the order of my javascript requirements from:

application.js

//= require bootstrap-wysihtml5
//= require bootstrap-wysihtml5/locales/de-DE
//= require highcharts/highcharts                                                           
//= require highcharts/highcharts-more                                                         
//= require highcharts/highstock

to: application.js

//= require highcharts/highcharts                                                           
//= require highcharts/highcharts-more                                                         
//= require highcharts/highstock
//= require bootstrap-wysihtml5
//= require bootstrap-wysihtml5/locales/de-DE

But that changed nothing.

Second attempt

My second attempt to fix this was to require the lazy_high_charts javascript files inside the dashboard.js file.

application.js

//= require bootstrap-wysihtml5
//= require bootstrap-wysihtml5/locales/de-DE

dashboard.js

//= require highcharts/highcharts                                                           
//= require highcharts/highcharts-more                                                         
//= require highcharts/highstock

But the problem with this attempt was that after precompiling all the assets the javascript files are compiled into this one big javascript file and my wysiwyg editors stopped again.

My third idea is the following: For my dashboard I could create an own asset folder and an own manifest file for my dashboard controller. In it's javascript manifest I could require the lazy_high_charts javascript files. At the bottom of my dashboard/index.html.erb view file I could load the javascript manifest with

<%= javascript_include_tag "dashboard" %>

That would solve the problem at the moment. But when I need an view with a high charts graph and a wysiwyg text box I ran into the same problem once again.

Therefore I ask me if there isn't a better solution which will stop the conflict of both gems and will allow me to use both in the same view.

Answer 1

I use the full highcharts gem with foundation which is pretty similar to bootstrap and I haven't found any compatibility issues...

Probably not the answer you're looking for, but maybe a good option!