Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

jqPlot doesn't display at all with Rails-added bootstrap footer

Tags:

ruby-on-rails

twitter-bootstrap

jqplot

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>
like image 400
ctd Avatar asked Nov 30 '25 14:11

ctd

1 Answers

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.

like image 148
pizoelectric Avatar answered Dec 03 '25 07:12

pizoelectric
Sign in to Comment

Related questions

rails 3 scopes inherited from other models
Rails routing error with nested resources
Can I use other helpers methods in application_helper.rb?
Rails 3 + CarrierWave + Rspec: model validation
Rails - Using true and false
NGINX and environment variables from configuration file
Rails WEBrick not writing log to terminal (stdout)

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!