Question

I have a static page which displays a simple bar chart using jqplot, and when I throw that code into a Rails view it doesn't display anything.

  1. The javascript does get called, because if I toss an alert into the showGraph() function it shows up on page load.
  2. The server doesn't complain about not being able to find the javascript or CSS.
  3. If I take the Rails-generated code and put it in the public folder to get it shown statically, the graph doesn't show up.
  4. BUT, if I take out the line containing "script src="/assets/jquery.js?body=1" type="text/javascript"" in the footer, then the graph shows up
  5. If I instead remove the call to jquery.min.js that precedes the jqplot includes, there is no difference in behavior.

EDIT: 6. More fooling around shows that the graph won't appear if I include jquery.js any time after I include jquery.jqplot.min.js.

Is it possible to show this chart without messing with the footer? Is there a well-established way to do this correctly that I should know of?

Here is the Rails-generated HTML, minus some stuff which doesn't affect the behavior I'm talking about:

<!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>
Was it helpful?

Solution

It looks like you are loading the jquery library in three places in your document?

Why not add it to the asset pipeline?

In app/assets/javascripts/application.js:

//= require jquery

This should speed up pageloads and you won't have to include the script tags on every page.

OTHER TIPS

OK, here's what I did to get it working: removed the line:

<%= javascript_include_tag "jquery" %>

which generates the offending line, from [appdir]/app/views/shared/_bootstrap2.html.erb (which generates the lines in the footer)

and put it into [appdir]/app/views/shared/_bootstrap.html.erb (which generates the lines in the header).

This isn't ideal since it means we're loading jquery before loading the rest of the page, so I'm still interested in a slicker solution.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top