title: Partial View and jQuery graph issues
body: <p>I've inherited a project and am very green regarding UI.  This project uses Bootstrap, nvd3, and flot on Chrome.  There is a layout view in which jQuery is referenced, and then partial views for each page are rendered in the layout body.  On a dashboard page, the graphs don't show up unless jQuery is again referenced in the scripts, but that reference causes the sidebar to cease working.  Referencing easing can be duplicated in the dashboard scripts to get both the graphs to appear and the sidebar to function, but one graph still doesn't work properly.  This leads me to believe that jQuery and its libraries are being referenced multiple times on the layout and partial views, wiping out the references that display graphs, activate the sidebar, render graphs correctly, etc.</p>
  
  <p>If that's correct, is there a way to trace each jQuery reference?  I've tried deleting multiple references in the source code by sight, moving layout references into the HTML body, testing what's being hit through Chrome Developer Tools, re-calling references as described above as a band-aid, and searching here for similar questions, but nothing seems to achieve both the correct visual and functionality.  Also, can a duplicated jQuery reference on a different partial view that shares the same parent layout nullify references in any other partial view?  Please opine if there's another possible solution not considered here, because I'm ultimately trying to get the sidebar and graphs working properly.  Thanks in advance for looking at this.</p>
  
  <p>Here's the layout with references:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;@ViewBag.Title&lt;/title&gt;
      &lt;meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no"&gt;
  
      &lt;link rel="shortcut icon" href="/favicon.ico" /&gt;
  
      @Styles.Render("~/Content/css")
      @Styles.Render("~/Content/icons")
  
      @Scripts.Render("~/bundles/modernizr")
  
      @RenderSection("headcontent", required: false)
  
      &lt;!-- page specific stylesheets --&gt;
      &lt;!-- nvd3 charts --&gt;
      &lt;link rel="stylesheet" href="/Content/lib/novus-nvd3/nv.d3.min.css"&gt;
      &lt;!-- owl carousel --&gt;
      &lt;link rel="stylesheet" href="/Content/lib/owl-carousel/owl.carousel.css"&gt;
  
      &lt;!-- google webfonts --&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400&amp;amp;subset=latin-ext,latin' rel='stylesheet' type='text/css'&gt;
  
      &lt;!-- datepicker --&gt;
      &lt;link rel="stylesheet" href="/Content/lib/bootstrap-datepicker/css/datepicker3.css"&gt;
      &lt;!-- date range picker --&gt;
      &lt;link rel="stylesheet" href="/Content/lib/bootstrap-daterangepicker/daterangepicker-bs3.css"&gt;
      &lt;!-- timepicker --&gt;
      &lt;link rel="stylesheet" href="/Content/lib/bootstrap-timepicker/css/bootstrap-timepicker.min.css"&gt;
      &lt;!-- ion.rangeSlider --&gt;
      &lt;link rel="stylesheet" href="/Content/lib/ion.rangeSlider/css/ion.rangeSlider.css"&gt;
      &lt;!-- bootstrap switches --&gt;
      &lt;link href="/Content/lib/bootstrap-switch/build/css/bootstrap3/bootstrap-switch.css" rel="stylesheet"&gt;
      &lt;!-- 2col multiselect --&gt;
      &lt;link href="/Content/lib/multi-select/css/multi-select.css" rel="stylesheet"&gt;
      &lt;!-- multiselect, tagging --&gt;
      &lt;link rel="stylesheet" href="/Content/lib/select2/select2.css"&gt;
  
      &lt;!-- main stylesheet --&gt;
      &lt;link href="/Content/css/style.css" rel="stylesheet" media="screen"&gt;
  
      &lt;!-- moment.js (date library) --&gt;
      &lt;script src="/Content/lib/moment-js/moment.min.js"&gt;&lt;/script&gt;
  
  
      [styles omitted...]
  
  &lt;/head&gt;
  &lt;body&gt;
      [header omitted...]
  
      &lt;!-- main content --&gt;
      &lt;div id="main_wrapper"&gt;
  
          [messages omitted...]
  
          @RenderBody()
      &lt;/div&gt;
  
      &lt;!-- side navigation --&gt;
      &lt;nav id="side_nav"&gt;
          @Html.Partial("~/Views/Shared/_SidebarLeft.cshtml")
      &lt;/nav&gt;
  
      &lt;!-- jQuery --&gt;
      &lt;script src="/Content/js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- easing --&gt;
      &lt;script src="/Content/js/jquery.easing.1.3.min.js"&gt;&lt;/script&gt;
      &lt;!-- bootstrap js plugins --&gt;
      &lt;script src="/Content/bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;!-- top dropdown navigation --&gt;
      &lt;script src="/Content/js/tinynav.js"&gt;&lt;/script&gt;
      &lt;!-- perfect scrollbar --&gt;
      &lt;script src="/Content/lib/perfect-scrollbar/min/perfect-scrollbar-0.4.8.with-mousewheel.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- common functions --&gt;
      &lt;script src="/Content/js/tisa_common.js"&gt;&lt;/script&gt;
  
      @RenderSection("Scripts", required: false)
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here's the dashboard HTML:</p>
  
  <pre><code>@using Project.Models
  @model DashboardViewModel
  @{
      ViewBag.Title = "Home Page";
  
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  
  &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
              &lt;div class="panel panel-default"&gt;
                  &lt;div class="heading_b"&gt;Prices Chart&lt;/div&gt;
                  &lt;div class="panel-body"&gt;
                      &lt;div id="nvd3_cumulativeLine" style="width: 100%; height: 300px"&gt;
                          &lt;svg&gt;&lt;/svg&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Finally, here are the dashboard scripts, with removal of jQuery causing the chart to disappear, removal of easing causing the sidebar to cease pop-outs, and removal of both causing the chart to disappear but leaving sidebar functionality intact.</p>
  
  <pre><code>@section Scripts{
      &lt;!-- page specific plugins --&gt;
  
      &lt;!-- jQuery DUPLICATE --&gt;
      &lt;script src="/Content/js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- easing DUPLICATE --&gt;
      &lt;script src="/Content/js/jquery.easing.1.3.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- nvd3 charts --&gt;
      &lt;script src="/Content/lib/d3/d3.min.js"&gt;&lt;/script&gt;
      &lt;script src="/Content/lib/novus-nvd3/nv.d3.min.js"&gt;&lt;/script&gt;
      &lt;!-- flot charts--&gt;
      &lt;script src="/Content/lib/flot/jquery.flot.min.js"&gt;&lt;/script&gt;
      &lt;script src="/Content/lib/flot/jquery.flot.pie.min.js"&gt;&lt;/script&gt;
      &lt;script src="/Content/lib/flot/jquery.flot.resize.min.js"&gt;&lt;/script&gt;
      &lt;script src="/Content/lib/flot/jquery.flot.tooltip.min.js"&gt;&lt;/script&gt;
      &lt;!-- clndr --&gt;
      &lt;script src="/Content/lib/underscore-js/underscore-min.js"&gt;&lt;/script&gt;
      &lt;script src="/Content/lib/CLNDR/src/clndr.js"&gt;&lt;/script&gt;
      &lt;!-- easy pie chart --&gt;
      &lt;script src="/Content/lib/easy-pie-chart/dist/jquery.easypiechart.min.js"&gt;&lt;/script&gt;
      &lt;!-- owl carousel --&gt;
      &lt;script src="/Content/lib/owl-carousel/owl.carousel.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- dashboard graph functions --&gt;
      &lt;script src="/Content/js/apps/tisa_dashboard.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          function cumulativeTestData() {
              var closes = JSON.parse('@Html.Raw(Json.Encode(Model.Coordinates))')
              return [
                  {
                      key: "Prices",
                      values: closes
                  },
              ];
          }
      &lt;/script&gt;
  }
  </code></pre>