Why do I continue to encounter the error message saying 'jQuery is not defined'?

As a newcomer to the world of jQuery and Visual Studio Environment, I embarked on the journey of creating a circular navigation menu bar following the instructions provided in this link. Despite my efforts, I encountered a hurdle in the head section where I've included all the necessary jQuery and jQueryUI scripts. The errors depicted in the screenshot have left me baffled as previous inquiries on stackoverflow failed to provide a satisfactory solution.

Below is the code at hand. Any assistance will be highly appreciated!

Thank you in advance.

@{
      Layout = null;
 }

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>

<script src="~/Scripts/jquery-1.11.2.js"></script>

<link rel="stylesheet"  
href="code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="~/Scripts/modernizr-2.6.2.min.js"></script>
<script src="~/Scripts/polyfills.js"></script>
<script src="~/Scripts/classie.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">

<style>
    .cn-button { 
border:none;
background:none;
color: white;
text-align: Center;
font-size: 1.5em;
padding-bottom: 1em;
height: 3.5em;
width: 3.5em;
background-color: #111;
position: fixed;
left: 50%;
margin-left: -1.75em;
bottom: -1.75em;
border-radius: 50%;
cursor: pointer;
z-index: 11
}
.cn-button:hover,
.cn-button:active,
.cn-button:focus{
 background-color: #222;
}
</style>
<style>
    .csstransforms .cn-wrapper {
font-size:1em;
width: 26em;
height: 26em;
overflow: hidden;
position: fixed;
z-index: 10;
bottom: -13em;
left: 50%;
border-radius: 50%;
margin-left: -13em;
transform: scale(0.1);
transition: all .3s ease;
}
/* class applied to the container via JavaScript that will scale the   
navigation up */
.csstransforms .opened-nav {
border-radius: 50%;
transform: scale(1);
}
  </style>
  <style>
       .cn-overlay{
       width:100%
       height:100%;
       background-color: rgba(0,0,0,0.6);
       position:fixed;
       top:0;
       left:0;
       bottom:0;
       right:0;
       opacity:0;
       transition: all .3s ease;
       z-index:2;
       pointer-events:none;
     }

     /* Class added to the overlay via JavaScript to show it when navigation  
     is open */
     .cn-overlay.on-overlay{
          pointer-events:auto;
          opacity:1;
      }
     </style>
     <style>
    .csstransforms .cn-wrapper li {
        position: absolute;
        font-size: 1.5em;
        width: 10em;
        height: 10em;
        transform-origin: 100% 100%;
        overflow: hidden;
        left: 50%;
        top: 50%;
        margin-top: -1.3em;
        margin-left: -10em;
        transition: border .3s ease;
       }

       .csstransforms .cn-wrapper li a {
            display: block;
           font-size: 1.18em;
           height: 14.5em;
           width: 14.5em;
           position: absolute;
            bottom: -7.25em;
          right: -7.25em;
           border-radius: 50%;
           text-decoration: none;
           color: #fff;
           padding-top: 1.8em;
           text-align: center;
           transform: skew(-50deg) rotate(-70deg) scale(1);
           transition: opacity 0.3s, color 0.3s;
         }

            .csstransforms .cn-wrapper li a span {
               font-size: 1.1em;
               opacity: 0.7;
             }
          /* for a central angle x, the list items must be skewed by 90-x           
           degrees in our case x=40deg so skew angle is 50deg
           items should be rotated by x, minus (sum of angles - 180)2s (for  
           this demo) */

        .csstransforms .cn-wrapper li:first-child {
         transform: rotate(-10deg) skew(50deg);
      }

        .csstransforms .cn-wrapper li:nth-child(2) {
            transform: rotate(30deg) skew(50deg);
        }

       .csstransforms .cn-wrapper li:nth-child(3) {
             transform: rotate(70deg) skew(50deg)
          }

         .csstransforms .cn-wrapper li:nth-child(4) {
         transform: rotate(110deg) skew(50deg);
          }

        .csstransforms .cn-wrapper li:nth-child(5) {
              transform: rotate(150deg) skew(50deg);
            }

        .csstransforms .cn-wrapper li:nth-child(odd) a {
                  background-color: #a11313;
                background-color: hsla(0, 88%, 63%, 1);
            }

         .csstransforms .cn-wrapper li:nth-child(even) a {
                background-color: #a61414;
                background-color: hsla(0, 88%, 65%, 1);
             }

           /* active style */
          .csstransforms .cn-wrapper li.active a {
              background-color: #b31515;
              background-color: hsla(0, 88%, 70%, 1);
           }

            /* hover style */
         .csstransforms .cn-wrapper li:not(.active) a:hover,
         .csstransforms .cn-wrapper li:not(.active) a:active,
         .csstransforms .cn-wrapper li:not(.active) a:focus {
          background-color: #b31515;
          background-color: hsla(0, 88%, 70%, 1);
         }
         .csstransforms .cn-wrapper li:not(.active) a:focus {
         position: fixed; /* fix the "displacement" bug in webkit browsers  
         when using tab key */
       }
        </style>
       </head>
       <body>
            <div>
              <button class="cn-button" id="cn-button">+</button>
               <div class="cn-wrapper" id="cn-wrapper">
                   <ul>
                       <li><a href="#"><span class="icon-picture"></span> 
                         </a></li>
                      <li><a href="#"><span class="icon-headphones"></span> 
                         </a></li>
            <li><a href="#"><span class="icon-home"></span></a></li>
            <li><a href="#"><span class="icon-facetime-video"></span></a> 
                    </li>
                  <li><a href="#"><span class="icon-envelope-alt"></span> 
                    </a></li>
                   </ul>
             </div>
            <div id="cn-overlay" class="cn-overlay"></div>
            </div>
            <script>
                        $(document).ready(function(){

                        var button = document.getElementById('cn-button'),
                        wrapper = document.getElementById('cn-wrapper'),
                        overlay = document.getElementById('cn-overlay');

                       //open and close menu when the button is clicked
                          var open = false;
                        button.addEventListener('click', handler, false);
                      button.addEventListener('focus', handler, false);
                     wrapper.addEventListener('click', cnhandle, false);

                        function cnhandle(e) {
                        e.stopPropagation();
                   }

                 function handler(e) {
                 if (!e) var e = window.event;
                 e.stopPropagation();//so that it doesn't trigger click  
                  //event on document

                 if (!open) {
                       openNav();
                    }
                 else {
                      closeNav();
                     }
                 }
                 function openNav() {
                       open = true;
                       button.innerHTML = "-";
                       classie.add(overlay, 'on-overlay');
                       classie.add(wrapper, 'opened-nav');
                  }
                function closeNav() {
                       open = false;
                       button.innerHTML = "+";
                       classie.remove(overlay, 'on-overlay');
                       classie.remove(wrapper, 'opened-nav');
                     }
                 document.addEventListener('click', closeNav);

              });
       </script>
       </body>
       </html>

Answer №1

Consider exploring a different iteration of jQuery by downloading the min.js files and saving them to your local directory. Be sure to provide a valid src path to access it successfully. This approach could potentially solve your issue. http://jquery.com/download/

Answer №2

When referencing files in your code, it is important to use either absolute or relative paths. You can use '/js/jquery.js' for webroot and '../js/jquery.js' depending on the location of the file you are calling (Absolute path is recommended). Make sure to avoid using the ~ indicator.

For example:

<script src="~/Scripts/jquery-1.11.2.js"></script>

Instead, try using:

<script src="/Scripts/jquery-1.11.2.js"></script>

This will ensure that the file is called correctly relative to the webroot.

Answer №4

After troubleshooting extensively, I decided to start fresh by creating a new project and meticulously adding each .js script individually. Surprisingly, this approach resolved the issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to retrieve AJAX variables from outside the AJAX function

$(document).ready(function() { var items; $.ajax({ url: 'item/getProducts', dataType: 'json', success: function(data){ items=data; ...

Combining HTML, CSS, and ASP.NET is a

<table cellspacing="0" cellpadding="0" width="100%" style="background-image: url('/ProjectSample/images/LoginBox.png'); background-repeat: no-repeat;"> Is there something incorrect with the way this style tag is referencing an image with ...

Tips for adjusting the animation position in Off-Canvas Menu Effects

I am currently utilizing the wave menu effect from OffCanvasMenuEffects. You can view this menu in action below: ... // CSS code snippets here <link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/f ...

Tips for adding one document to two separate collections using JavaScript and MongoJS

Having trouble inserting data into two separate tables using javascript and mongojs. While I was able to successfully insert into a single collection by following the npm mongojs documentation, I couldn't find a solution for multiple collections on th ...

What could be causing this ajax function to fail?

I referred to a solution in response to this question: My objective is to execute a query on the database when a user clicks on a specific table row, enabling me to retrieve and display their information. Below is the piece of code I am using: AJAX: $( ...

Can Restify Node return an integer value?

https://i.stack.imgur.com/72ltz.png I recently encountered an issue while trying to validate my URL with Facebook for my bot. It appears to be related to a data type problem since I seem to be sending a string instead of an integer. Below is a snippet of ...

Wrap the text within the contenteditable div with the <p> tag

By utilizing the code snippet below, I have managed to input text into a contenteditable div and instead of generating a new div on pressing the enter key, it generates <br> tags. Is there a way to enclose the text inside the contentedtiable div wit ...

Having trouble capturing screenshots with PuppeteerJS?

I've encountered an issue while working with Puppeteer to capture screenshots from a provided URL. The code I have below doesn't seem to be functioning properly. It keeps showing the error message: [0] Error: Protocol error (Emulation.setDeviceM ...

Unusual characteristics of decision-making

Here is a snippet of my JavaScript code: function getSelectedText(){ if(window.getSelection){ select = window.getSelection().getRangeAt(0); var st_span = select.startContainer.parentNode.getAttribute("id").split("_") ...

Using arrays in Three.js for material instead of MeshFaceMaterial: a guide

I'm starting out with three.js as a beginner. I've run into some issues with MeshFaceMaterial. If anyone has any advice or solutions, I would greatly appreciate it. Thank you in advance! ...

I'm seeking assistance in understanding the malfunction of this particular function

I am struggling to create a basic function that is supposed to check whether a value is a number and not greater than 100. I'm confused as to why it's not working. Can someone explain if mixing jQuery and JavaScript is causing the issue? $(' ...

How can the executable path for Firefox be specified in Nightwatch?

I've been using nightwatch to run tests on both Chrome and Firefox with great success. While everything runs smoothly on Chrome, I'm facing an issue when trying to run tests on Firefox on my personal machine. Currently, due to Marionette's ...

Utilize Jquery to send a preset value through an ajax request

I am working on a select box functionality where the selected option is sent via ajax to a server-side script. The current setup is functioning properly. Here is the code for the select box: <select id="main_select"> <option selecte ...

Using the goBack function in React Router does not add the previous location to the stack

In React Router v4, I have a list page and a details page in my web application. I want to implement a 'Save and close' button on the details page that redirects the user back to the list page when clicked. However, I noticed that after the user ...

Getting access to props within a child component's mounting phase

It is commonly understood that when the child component is mounted before the parent component, trying to access props in the child component's mounted period will result in null. However, I recently came across a scenario where props were successful ...

The additional cost associated with using a React hook is called the "

Our system includes a theme context provider that passes down a theme to all child components, calculated based on the device's dimensions. We can easily access these values using the useTheme hook in any component. In addition, we have a constants f ...

Using a single identifier for multiple functions or event handlers

Just a quick question: is there an alternative method to streamline this code? $('.icMenu span.menu').each(function() { // perform a certain action }); $('.icMenu span.menu').click(function() { // perform a different action } ...

The default value of the select option will not be displayed upon loading and will also not appear when another option is selected

I created a form using vue.js that includes a select option dropdown. However, the default value does not display when the form loads, and when a new option is selected from the dropdown, it also does not show. When I use v-for to loop through all options ...

Executing a Firebase JavaScript script on a remote web server client

I have limited experience with Javascript and I am struggling to get my code to execute. I have already completed the Android java portion, but when I attempt to run the html file, nothing happens. I am unsure if there are bugs in my code or if it needs to ...

Is the server delivering an unexpected response?

Implementing a post request using the fetch API in React JS, I provide a URL to the server from the frontend. The server then utilizes this URL to make an API call to Clarifai API. The expected response is received from the API; however, when transferring ...