$ is not defined in ejs file when trying to add and remove class

Question

I am trying to create an active class for my navbar so the people can see what page they are on. I created the JQuery logic in the file but when I try to run my program it brings up an error: "Reference Error, $ is not defined". I tried installing a jquery package but that did not help. Below is the code:

<!DOCTYPE html>
 <html>
  <head>
<title>Portfolio</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <link rel = "stylesheet" href = "/stylesheets/main.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>
 <body class="main">

 <nav class="navbar navbar-expand-lg navbar-light">
  <a class="navbar-brand text-white" href="/">Cody Blackwood</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link text-white" href="/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-white" href="/projects">Projects</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-white" href="/info">About Me</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-white" href="/resume">Resume</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-white" href="/contact">Contact</a>
    </li>
  </ul>
 </div>
</nav>

<script>
 $(document).ready(function() {
  $(".nav-item").on("click", function(event){
    $("li.nav-item").removeClass("active");
    $(this).addClass("active");
   });
 });
</script>

CSS:

.navbar-nav .nav-item .nav-link {
   color: white;
 }

.navbar-nav .nav-item:active .nav-link{
  background-color: white;
  color: #5900b3;
}

I don't see JQuery loaded in your sample code, check the below answer. — jaredlee.exe, Jan 10 '19 at 09:23

score 1 · Answer 1 · answered Jan 10 '19 at 08:05

Bootstrap getting started says:

Many of our components require the use of JavaScript to function. Specifically, they require jQuery,

So you miss this line from the header:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

score 0 · Answer 2 · answered Jan 10 '19 at 08:09

0

ejs is a template and it will generate a valid html. It seems like your code run at server side.

Make sure the jQuery has been loaded properly
Your js code should be run in client side, warp by <script></script>, not <% %>
Run your code while DOM is ready window.onload = () => { /* ... */ }

answered Jan 10 '19 at 08:09

Learning

305
1
13

Can you explain the third step more to me? – CliffordStorm Jan 10 '19 at 17:19
`` – Learning Jan 11 '19 at 04:03

Lord Elrond · Answer 3 · 2019-01-19T03:09:02.423

0

ejs functions defined between the <% %> are loaded before the contents of the page are rendered, so when you try to $('#id1').doSomething(); jquery won't be able to find the element with id="id1" because that element doesn't exist yet.

If you want to modify the nav bar in the way you are describing, you will have to create a

<script src="jquery.js"></script>

underneath the elements(s) you want to modify.

jquery.js would look something like this:

$(document).ready(function() {
    $(".nav-item").on("click", function(event){
             $("li.nav-item").removeClass("active");
             $(this).addClass("active");
    });
});

If you are still having issues after trying this, then you probably don't have jquery setup correctly.
Follow this link to learn about setting up jquery on node.js.

If you want to learn how to mute the linter warnings, look here.

Edit

<script>
 $(document).ready(function() {
  $(".nav-item").on("click", function(event){

    $(this).closest("li").css('background-color', 'red').siblings().css('background-color', 'white');

   });
 });
 </script>

edited Jan 19 '19 at 03:09

answered Jan 16 '19 at 20:07

Lord Elrond

13,430
7
40
80

I see part of my original error as to why this didn't work. When I use the link to set up jquery correct though, it keeps telling me that the $ is never used but is assigned (var $ = require('jquery')(window);). Is there a common cause of why this happens? – CliffordStorm Jan 17 '19 at 22:28
Does your app crash? or is it a linter warning? – Lord Elrond Jan 17 '19 at 23:14
It is just a linter warning. I can still run the program fine but the active class still won't work. – CliffordStorm Jan 18 '19 at 05:12
Yeah it does that for me too. I think linter expects you to use jquery on your server. I added a link in my answer to learn how to mute these warnings. – Lord Elrond Jan 18 '19 at 17:11
I just updated the code from the original question to what the code looks like now – CliffordStorm Jan 18 '19 at 18:28
what is the "active" class? and what exactly do you want to happen when you click on a link? – Lord Elrond Jan 18 '19 at 18:36
your problem isn't with the jquery not loading btw. You would get a 404 (or another error) in the network tab of your inspector. – Lord Elrond Jan 18 '19 at 18:37
When any of the navbar links are clicked I want it to change colors so the user can see which page they are on – CliffordStorm Jan 18 '19 at 18:44
Added updated code in my answer. That should work for you. – Lord Elrond Jan 19 '19 at 03:09
With the code I currently have posted, I have the active class be added to one of the li's when I click on it but it won't stay active. It will show for a second and then when the page is loaded it will not stay active. Other than that it works now – CliffordStorm Jan 20 '19 at 20:08
I also added the CSS under as well Jane – CliffordStorm Jan 20 '19 at 20:30

$ is not defined in ejs file when trying to add and remove class

3 Answers3

Edit