Question

我有一个静态页面，它使用jqplot显示一个简单的条形图，当我将该代码放入Rails视图时，它不会显示任何内容。

javascript确实被调用，因为如果我将警报扔进去 showGraph（）函数显示在页面加载上。
服务器不会抱怨无法找到javascript或CSS。
如果我使用Rails生成的代码并将其放在公共文件夹中以获取它静态显示，图表没有显示。
但是，如果我在页脚中取出包含“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>

Answer 1

看起来您正在文档中的三个位置加载jquery库？

为什么不将它添加到资产管道？

在app / assets / javascripts / application.js中：

//= require jquery

这样可以加快页面加载速度，您不必在每个页面上都包含脚本标记。

Answer 2

好的，这就是我为使其工作所做的工作：删除了一行：

<%= javascript_include_tag "jquery" %>

从[appdir] /app/views/shared/_bootstrap2.html.erb（在页脚中生成行）生成违规行

并将其放入[appdir] /app/views/shared/_bootstrap.html.erb（生成标题中的行）。

这并不理想，因为这意味着我们在加载页面的其余部分之前加载了jquery，所以我仍然对一个更加流畅的解决方案感兴趣。

jqPlot根本不显示Rails添加的bootstrap页脚

2 个答案: