我让Rails从菜单执行link_to ajax调用,以将图表动态地插入网站的主要内容区域。我可以看到html已正确替换。.但未加载图表。

这是我的application.html.erb的主要内容部分:

<div id="maincontentcontainer">
    <div id="maincontent">
        <div class="section group">
            <div class="col span_1_of_7">
                <%= render :partial => "shared/menu" %>
            </div>
            <div id="replace">
                <%= yield %>
            </div>
        </div>
    </div>
</div>

这是在AJAX调用后插入以下部分的索引html:
<div id="replace">
  <div class="col span_6_of_7">
    <section id="infographic">
      <div id="infographicContent">
        <div id="chart" style="min-width: 310px; height: 700px; margin: 0 auto"></div>
      </div>
    </section>
  </div>
</div>

这是局部的:
<div class="col span_6_of_7">
    <section id="infographic">
        <div id ="infographicContent">
            <%= javascript_include_tag "highcharts" %>
            <%= javascript_include_tag "charts" %>
            <div id="chart" style="min-width: 310px; height: 700px; margin: 0 auto"></div>
        </div>
    </section>
</div>

我的chart.js的所有图表都具有选项(称为选项),这些选项可以传入并像这样运行:
$(document).ready(function () {
        $('#chart').highcharts(options);
    });
});

谁能向我解释为什么?我该怎么办?

谢谢。

最佳答案

问题是您在ajax完成之前正在调用$('#chart').highcharts(options);。因此,它将找不到尚未插入的<div id="chart">

要解决该问题,您有两种选择:

  • 将图表创建脚本移至ajax回调,以在ajax完成后执行:


  • 在插入<div id="chart">之后,将图表创建脚本移动到响应html:



  • 注意:我假设您代码中的其他});只是一个拼写错误/错误。

    10-05 20:38
    查看更多