JqPlot not showing at all with Rails bootstrap footer

I have a static page that displays a simple bar chart using jqplot and when I throw this code into a Rails view it does not display anything.

  • javascript makes the call because if I throw an alert in showGraph () that is displayed on page load.
  • The server doesn't complain that it can't find javascript or CSS.
  • If I take the Rails generated code and put it in a public folder to get it statically displayed, the graph is not displayed.
  • BUT if I dump out the line containing "script src =" /assets/jquery.js? body = 1 "type =" text / javascript "" in the footer, then the graph will appear
  • If you instead remove the jquery.min.js call that precedes jqplot, there is no difference in behavior.

EDIT: 6. More trick shows that the plot won't show up if I include jquery.js anytime after I include jquery.jqplot.min.js.

Is it possible to show this diagram without going into the footer? Is there a well-established way to get it right that I should know?

Here's the Rails generated HTML, minus some things that don'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>

      

+3


source to share


2 answers


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

Why not add it to the resource pipeline?

In app / assets / javascripts / application.js:



//= require jquery

This should make the pages load faster and you shouldn't need to include script tags on every page.

+1


source


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

<%= javascript_include_tag "jquery" %>

      

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



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

This is not ideal because it means we are loading jquery before the rest of the page is loaded, so I'm still interested in slicker's solution.

0


source







All Articles