lazy_high_charts和基礎衝突加載javascript

Question

我正在使用lazy_high_charts和foundation 4。

我認爲我有<%= high_chart("my_id", @chart) %>，其產生以下：

<section> 
    <script type="text/javascript"> 
    (function() { 
     var onload = window.onload;      # I think 
     window.onload = function(){      # the issue 
     if (typeof onload == "function") onload();  # is here 
      var options = { "title": { "text": "Combination chart" },"legend": { "layout": "vertical","style": { } },"xAxis": { },"yAxis": { "title": { "text": null },"labels": { } },"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": { } },"chart": { "defaultSeriesType": "line","renderTo": "my_id" },"subtitle": { },"series": [{ "type": "spline","name": "Average","data": [ 3,2.67,3,6.33,3.33 ] }] }; 

    window.chart_my_id = new Highcharts.Chart(options); 

     }; 
    })() 
    </script> 
<div id="my_id"></div> 
</section> 

然而，它不是因爲在我application.js

$(document).foundation(); 
$(function(){ $(document).foundation(); }); 

通過foundation 4產生如果我刪除以下行的顯示圖表加載的那些行。

如何將foundation和lazy_high_charts一起使用？

Answer 1

我解決了更新zurb-foundation和lazy_high_charts寶石的問題：

在我的Gemfile：

gem 'zurb-foundation', '~> 4.0.0' 
gem 'lazy_high_charts' 

然後：

bundle install 
bundle update lazy_high_charts 
rails g foundation:install 

我也包含在application.html.erb下面幾行：

... 
    <%= javascript_include_tag "vendor/custom.modernizr" %> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    ... 

之後，<%= high_chart("my_id", @chart) %>代碼生成以下的javascript：

<script type="text/javascript">   
(function() { 
    var f = function(){ 
    document.removeEventListener('page:load', f, true); 
... 

我希望它能幫助面臨同樣的問題的人。

Answer 2

代替

(function() { 
var onload = window.onload;      # I think 
window.onload = function(){      # the issue 

寫

$(function(){ 

得到的腳本代碼將如下：

<section> 
    <script type="text/javascript"> 
     $(function() { 
      var options = { "title": { "text": "Combination chart" },"legend": { "layout": "vertical","style": { } },"xAxis": { },"yAxis": { "title": { "text": null },"labels": { } },"tooltip": { "enabled": true },"credits": { "enabled": false },"plotOptions": { "areaspline": { } },"chart": { "defaultSeriesType": "line","renderTo": "my_id" },"subtitle": { },"series": [{ "type": "spline","name": "Average","data": [ 3,2.67,3,6.33,3.33 ] }] }; 

    window.chart_my_id = new Highcharts.Chart(options); 

    }); 
    </script> 
<div id="my_id"></div> 
</section> 

確保你已經把jQuery腳本之前。