3

メニューから link_to ajax 呼び出しを実行する Rails を使用して、サイトのメイン コンテンツ領域にグラフを動的に挿入します。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);
    });
});

誰かが私に理由を説明できますか? そして、私は何をする必要がありますか？

ありがとう。

4

1 に答える 1

2

問題は、ajax が終了$('#chart').highcharts(options); する前に呼び出していることです。<div id="chart">そのため、まだ挿入されていない は見つかりません。

この問題を解決するには、次の 2 つのオプションがあります。

  1. グラフ作成スクリプトを ajax callbackに移動し、 ajax の完了後に実行します。
 $.get('domain.com/ajax_call?param=value').then(function(response) {
      $("#replace").html(response);
      $('#chart').highcharts(options);
 });
  1. を挿入した後、グラフ作成スクリプトを応答 html に移動します<div id="chart">。
<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>
            <script>$('#chart').highcharts(options);</script>
        </div>
    </section>  
</div>

注：});あなたのコードの追加は、単なる質問のタイプミス/間違いであると想定しています。

于 2015-03-25T17:44:33.710 に答える