ruby-on-rails - Rails で追加されたブートストラップフッターで jqPlot がまったく表示されない

Question

jqplot を使用して単純な棒グラフを表示する静的ページがあり、そのコードを Rails ビューにスローすると、何も表示されません。

アラートを showGraph() 関数に投げると、ページの読み込み時に表示されるため、javascript が呼び出されます。
サーバーは、javascript または CSS が見つからないことについて不平を言いません。
Rails で生成されたコードを public フォルダーに入れて静的に表示すると、グラフが表示されません。
しかし、フッターに「script src="/assets/jquery.js?body=1" type="text/javascript"」を含む行を取り出すと、グラフが表示されます
代わりに、jqplot インクルードの前にある jquery.min.js への呼び出しを削除しても、動作に違いはありません。

編集: 6. さらにふざけてみると、jquery.jqplot.min.js をインクルードした後に jquery.js をインクルードすると、グラフが表示されないことがわかります。

フッターをいじらずにこのチャートを表示することはできますか? 私が知っておくべき、これを正しく行うための確立された方法はありますか?

以下は、Rails が生成した HTML から、私が話している動作に影響しないものを除いたものです。

<!DOCTYPE html>
<html>
<head>

  <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/custom.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="">

  <!-- Le styles -->
    <link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
    padding-top: 60px;
    padding-bottom: 40px;
    }
    </style>
    <!--<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">-->

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="/images/favicon.ico" />


    <style type="text/css">
      .navbar .brand {
        //float: right;
        padding-bottom: 6px;
        padding-top: 6px;
        //font-weight: 400;
      }
      .hero-unit h1 {
      //font-size:48px;
      }
      .hero-unit p {
      //font-size:24px;
        padding-top:12px;
      }
      .navbar .nav > li > a {
      line-height: 72px;
      padding-left: 15px;
      padding-right: 15px;
      font-size: 18px;
      }
    </style>
    <style type="text/css">
      body {
      padding-top: 120px;
      padding-bottom: 40px;
      font-size: 14px;
      }
      footer {
      font-size:12px;
      }
      legend {margin-bottom: 10px;}
    </style>
    <style>
      table.cleanlink td a {text-decoration:none; color:inherit; display:block; padding:0px; height:100%;}
      table.cleanlink td a:hover {text-decoration:none; color:inherit;}
      div.data-scroller {width:910px; max-height:400px; overflow:scroll;}
    </style>
    <style>
      ul.nav li.dropdown:hover ul.dropdown-menu {display: block;}
      ul.nav li.dropdown ul.dropdown-menu {margin-top: 0px;}
      //a.menu:after, .dropdown-toggle:after {content: none;}
    </style>



</head>
<body>



    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="brand" href="/home"><img src="/images/B4-l-s-m-h-i-2-273x80.png" /></a>

          <ul class="nav">
</ul>          <ul class="nav pull-right">
              <li class="dropdown">
                <a href="/account" class="dropdown-toggle" data-toggle="dropdown">My Account</a>
                <ul class="dropdown-menu pull-right">
                  <!--<li class="divider"></li>-->
                  <li><a href="/signout" data-method="delete" rel="nofollow">Sign out</a></li>
                </ul>
</li></ul>        </div>
      </div>
    </div>

    <div class="container">


      <html>
<script language="javascript" type="text/javascript" src="/assets/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="/assets/jquery.jqplot.min.js"></script>
  <script class="include" language="javascript" type="text/javascript" src="/assets/src/plugins/jqplot.barRenderer.min.js"></script>
  <script class="include" language="javascript" type="text/javascript" src="/assets/src/plugins/jqplot.categoryAxisRenderer.min.js"></script>
  <script class="include" language="javascript" type="text/javascript" src="/assets/src/plugins/jqplot.pointLabels.min.js"></script>

<script>

function showGraph() {
    var s1 = [20, 3, 2, 1];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var xticks = ['A', 'B', 'C', 'D'];

    var plot1 = $.jqplot('chart1', [s1], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            pointLabels: { show: true, location: 'n', edgeTolerance: -15 },
            rendererOptions: {fillToZero: true}
        },
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: xticks
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                tickOptions: {formatString: '%d'}
            }
        }
    });
};
$(document).ready(showGraph);

  </script>
<div id="chart1" style="height:400px;width:600px; "></div>
</html>
    </div> <!-- /container -->


    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
    <script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>


</body>
</html>

score 1 · Accepted Answer

ドキュメントの 3 か所に jquery ライブラリをロードしているように見えますか?

アセットパイプラインに追加してみませんか?

app/assets/javascripts/application.js 内:

//= require jquery

これにより、ページ読み込みが高速化され、すべてのページにスクリプトタグを含める必要がなくなります。

score 0 · Accepted Answer

OK、これを機能させるために私がしたことは次のとおりです。次の行を削除しました。

<%= javascript_include_tag "jquery" %>

[appdir]/app/views/shared/_bootstrap2.html.erb から問題のある行を生成します (フッターに行を生成します)

[appdir]/app/views/shared/_bootstrap.html.erb (ヘッダーに行を生成します) に配置します。

ページの残りの部分をロードする前に jquery をロードしていることを意味するため、これは理想的ではありません。

ruby-on-rails - Rails で追加されたブートストラップ フッターで jqPlot がまったく表示されない

2 に答える 2

Related

Reference

ruby-on-rails - Rails で追加されたブートストラップフッターで jqPlot がまったく表示されない