title: Adding a javascript to a razor page properly
body: <p>I have a template that I am using from template monster. In the files there is a javascript page that has all of the scripts needed to run the pages. I have added this to the bottom of the page where the scripts are rendered. It does not seem to be accessing the file. It is on the page and comes up when I am viewing it under the "Inspect object". When I put the code snippet directly in the razor page it works. Any ideas why it would not be pulling it from the javascript file? Thanks for your help.
  EDIT
   This resides in the _Layout page. Where the Menu is.</p>
  
  <p>The below works when inserted in the razor page.    </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          $(".sticky-menu").sticky({ topSpacing: 0 });
  
      });
  
      $(window).on('load', function () {
          function fadeOut(el) {
              el.style.opacity = 0.4;
              var last;
              var tick = function () {
                  el.style.opacity = +el.style.opacity - (new Date() - last) / 600;
                  last = +new Date();
                  if (+el.style.opacity &gt; 0) {
                      (window.requestAnimationFrame &amp;&amp; requestAnimationFrame(tick)) || setTimeout(tick, 100);
                  } else {
                      el.style.display = "none";
                  }
              };
              tick();
          }
          var pagePreloaderId = document.getElementById("page-preloader");
          setTimeout(function () {
              fadeOut(pagePreloaderId)
          }, 1000);
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This is what I have in the razor page that does not work</p>
  
  <pre><code> @Scripts.Render("~/Scripts/scripts.js")
  </code></pre>
  
  <p>The Top code resides in the "scripts.js" file. </p>
  
  <p>There is a lot of code in this file and it seems like none of it is working. Meaning it is like it is not accessing the script. All the scripts that are loaded in the page are in the same order as the Regular HTML in the template. The template HTML file works.</p>
  
  <p>UPDATE -</p>
  
  <p>I got this to work by moving this out of the script page and onto the layout page. I am still not sure why or what was causing this snippet not to work in the script page. It seems like the only part that wasnt working. </p>
  
  <p>In the script file it is written like this:</p>
  
  <pre><code>(function($) {
  'use strict';
  
  jQuery(document).on('ready', function() {
    ////// Other snippets //////
  
        $(".sticky-menu").sticky({
          topSpacing: 0
         });
    ////// Other snippets //////
  
   });
  </code></pre>
  
  <p>In the _Layout page it looks like this:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
  
              $(".sticky-menu").sticky({ topSpacing: 0 });
  
              var hub = $.connection.notificationHub;
              $.connection.hub.start()
                  .done(function () {
                      console.log("Hub Connected!");
  
                  })
                  .fail(function () {
                      console.log("Could not Connect!");
                  });
          });
   &lt;/script&gt;
  </code></pre>
  
  <p>I still do not know why this does not work from the Script file...</p>
  
  <p>UPDATE - 4-26-2019</p>
  
  <p>I have found the problem. The Template was created with a earlier version of jQuery. I have found that the Script file loads and partially works when I remove </p>
  
  <pre><code>jQuery(document).on('ready', function () { 
  </code></pre>
  
  <p>The entire file looks like this</p>
  
  <pre><code>(function($) {
  'use strict';
  
      jQuery(document).on('ready', function () { 
  
      ---&gt; All the jQuery Code
  
      });
  
   })(jQuery);
  </code></pre>
  
  <p>I changed the above line to be:</p>
  
  <pre><code> }(jQuery));
  </code></pre>
  
  <p>I saw some other implementations that had it this way. </p>
  
  <p>However there is something not right with this using jQuery 3.3.1.. if anyone knows how to properly format this so it works that would help alot.</p>