title: JavaScript runtime error: '$' is undefined - using MVC 4
body: <p>In my _Layout.cshtml I have the following:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8" /&gt;
          &lt;title&gt;Intranet Ads&lt;/title&gt;
          &lt;link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /&gt;
          &lt;meta name="viewport" content="width=device-width" /&gt;
          @Styles.Render("~/Content/css")
          @Scripts.Render("~/bundles/modernizr")
          &lt;script type="text/javascript"&gt;
              function search() {
                  var searchVal = $('#txtSearchString').val();
                  $('#adResults #summary').each(function () {
                      if (searchVal == '') {
                          $(this).parent().show();
                      } else {
                          $(this).not(':contains(' + searchVal + ')').parent().hide();
                      }
                  });
              }
  
          function openEditAd(val) {
              if (val != 'admin') {
                  $("#edit-content,#edit-background").toggleClass("active");
                  $("#txtConfirmationEdit").text = "";
              } else {
                  $("#edit-content-admin,#edit-background-admin").toggleClass("active");
                  $("#txtConfirmationEdit").text = "";
              }
          }
  
          function closeEditAd(permission) {
              if (permission != 'admin') {
                  if ($("#txtConfirmationEdit").val().trim() != "") {
                      var url = '@Url.Action("Edit", new { id = "__id__" })';
                      window.location.href = url.replace('__id__', $("#txtConfirmationEdit").val());
                  }
  
                  $("#edit-content,#edit-background").toggleClass("active");
              } else {
                  if ($("#txtConfirmationAdmin").val().trim() != "") {
                      var url = '@Url.Action("Edit", new { id = "__id__" })';
                      window.location.href = url.replace('__id__', $("#txtConfirmationAdmin").val());
                  }
  
                  $("#edit-content-admin,#edit-background-admin").toggleClass("active");
              }
          }
  
          $(document).ready(function () {
              // Handler for .ready() called.
              console.log("hi");
          });
  
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  ...
      @Scripts.Render("~/bundles/jquery")
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I just added the:</p>
  
  <pre><code>        $(document).ready(function () {
              // Handler for .ready() called.
              console.log("hi");
          });
  </code></pre>
  
  <p>To the end as I'm trying to implement a datepicker but I'm getting the </p>
  
  <blockquote>
    <p>JavaScript runtime error: '$' is undefined</p>
  </blockquote>
  
  <p>As you can see in my other functions I am using jQuery commands...  What is the reason for this?</p>
  
  <p>I was getting the exact same error when I had this in as well:</p>
  
  <pre><code>$(document).ready(
      function () {
          $('.datepicker').datepicker({
              changeMonth: true,
              changeYear: true,
              minDate: "-99Y",
              dateFormat: "dd/mm/yyyy"
          });
      });
  </code></pre>