javascript - Why is Highchart loaded twice in my rails app ? (Uncaught Highcharts error #16) -

i can't make working basic example of highcharts.

i got these errors :

uncaught highcharts error #16 in app/assets/javascripts/application.js uncaught typeerror: undefined not function in app/assets/javascripts/graphique_repartition_budgetaire

highcharts says error 16 because :

this error happens second time highcharts or highstock loaded in same page, highcharts namespace defined. keep in mind highcharts.chart constructor , features of highcharts included in highstock, if running chart , stockchart in combination, need load highstock.js file.

but can't figure out how can highcharts loaded twice in same page.

i'm using rails 3.2.21

i put gemfile :

gem 'jquery-rails' gem 'highcharts-rails', '~> 3.0.0' 

i put app/assets/javascripts/application.js :

//= require jquery //= require jquery_ujs //= require_tree . //= require highcharts 

i put app/views/layouts/application.html.haml :

%html   %head     %title title blablabla     = javascript_include_tag 'application'     = stylesheet_link_tag    'application', :media => 'screen'     = stylesheet_link_tag    'application', :media => 'print, projection'     /[if ie]       = stylesheet_link_tag    'application', :media => 'screen, projection'     = csrf_meta_tags ... 

this code have in view (haml-like) :

.groupe-champs-encadres   #graphique-repartition-budgetaire 

this put stylesheet (sass-like) :

#graphique-repartition-budgetaire   width: 100%   height: 400px 

this code (frome highcharts example) put app/assets/javascripts/graphique_repartition_budgetaire.js

$(function () {     $('#graphique-repartition-budgetaire').highcharts({         chart: {             type: 'bar'         },         title: {             text: 'fruit consumption'         },         xaxis: {             categories: ['apples', 'bananas', 'oranges']         },         yaxis: {             title: {                 text: 'fruit eaten'             }         },         series: [{             name: 'jane',             data: [1, 0, 4]         }, {             name: 'john',             data: [5, 7, 3]         }]     }); }); 

====== edit 1 ======

i notice error happen on other pages don't use id : #graphique-repartition-budgetaire". in other words, error happen on pages don't use javascript highcharts.

so excludes mistake on view javascript chart example function called (though highcharts.js of course called on every page). problem should lie somewhere else.

====== edit 2 ======

i made simple test check if jquery working properly. , fails. doesn't display "test" on page. there must problem jquery , rails 3.2. saw on stackoverflow people got problem making jquery working. did't find working solution now.

====== edit 3 ======

there wrong recommanded test. not working until save script file app/assets/javascript/display_my_div.js, , changed :

$(function() {   $('#mydiv').show(); }); 

so jquery working charm. problem definitively linked highcharts library.

ok, found there bug in rails when rake assets:precompile lead include twice js code app/assets , public/assets.

this bug referenced here since april 2013, rails community don't seem willing correct it.

as workaround :

1. run rake assets:clean
2. add line //= require highcharts app/assets/javascripts/application.js
3. run rake assets:precompile
4. delete line //= require highcharts app/assets/javascripts/application.js

so highchart library precompiled in assets pipeline public/assets.

its bit weird, works... in development...

i still have test in production confirm continues work.

=== edit 1 ===

in fact, simpler : in developpement mode, rails auto-compile js files, if precompiled rake:assets precompile command , compressed file (i dont remember yet) ; rails use both occurence of js code. of course not happen in production mode there (usually) no auto-compile mode activated (for performance consideration).