Question

193

How to use jquery with my Node.js EJS template?

rated 0 times [ 198] [ 5] / answers: 1 / hits: 22884 / 8 Years ago, sun, october 23, 2016, 12:00:00

SITUATION:

I am trying to implement the first answer (with 25 upvotes) to this question: How can I make an Upvote/Downvote button? with my Node.js ejs template.

So I wrote this code.

MY CODE:

Main.js

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>



$('.UpvoteButton').click(function () {

  $(this).toggleClass('on');

});



$('.DownvoteButton').click(function () {

  $(this).toggleClass('on');

});

style.css

.UpvoteButton {

    display: inline-block;

    overflow: hidden;

    width: 80px;

    height: 50px;

    margin-top: 15px;

    margin-right: 3px;

    cursor: pointer;

    background: url('/assets/UpvoteButtonSpriteSheet.png');

    background-position: 0 0px;

}



.DownvoteButton {

    display: inline-block;

    overflow: hidden;

    width: 80px;

    height: 50px;

    margin-top: 15px;

    margin-right: 3px;

    cursor: pointer;

    background: url('/assets/DownvoteButtonSpriteSheet.png');

    background-position: 0 0px;

}



.UpvoteButton.on {

  background-position: 0 50px;

}



.DownvoteButton.on {

  background-position: 0 50px;

}

index.ejs

<% include ../partials/header %>



<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>



<div class =containerMarginsIndex>



        <% for(var i=0; i < fun.length; i++) {%>

            <div class=fun>

                <h3 class=text-left><%= fun[i].title %></h3>

                <a href=details/<%= fun[i].id %>>

                    <img class = postImg src=/images/uploads/<%= fun[i].image %>>

                </a>

                <span class=UpvoteButton> </span><span class=DownvoteButton> </span>



            </div>

        <% } %>



</div>

<% include ../partials/footer %>

PROBLEM:

Nothing happens when I click. The images stay the same.

QUESTION:

What have I done wrong ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

sandra

Add To Favorites

Follow

Total Points: 708

Total Questions: 100

Total Answers: 84

Location: Bosnia and Herzegovina

Member since Thu, Jun 24, 2021

3 Years ago

sandra questions

1 NestJS/TypeORM: Cannot read property 'createQueryBuilder' of undefined

Mon, Nov 16, 20, 00:00, 4 Years ago

1 How to pass an array in query parameter reactjs

Tue, Jun 30, 20, 00:00, 4 Years ago

1 Firebase popup signin popup-closed-by-user error

Sun, May 31, 20, 00:00, 4 Years ago

1 How to test a component with the < Router> tag inside of it?

Wed, May 20, 20, 00:00, 4 Years ago

1 How do I send an array with fetch? (Javascript)

Fri, May 31, 19, 00:00, 5 Years ago

View All

answered 8 Years ago lonnier · Accepted Answer

You'll have to include jQuery and the clientside script in your EJS template, so it's rendered in the browser.

Installing jQuery with npm in Node, and doing var $ = require('jquery') on the serverside, just lets you use some of jQuery's methods on the server, it doesn't include jQuery on the clientside.

Change the template to something like

<% include ../partials/header %>



<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>



<div class =containerMarginsIndex>



        <% for(var i=0; i < fun.length; i++) {%>

            <div class=fun>

                <h3 class=text-left><%= fun[i].title %></h3>

                <a href=details/<%= fun[i].id %>>

                    <img class = postImg src=/images/uploads/<%= fun[i].image %>>

                </a>

                <span class=UpvoteButton> </span><span class=DownvoteButton> </span>



            </div>

        <% } %>



</div>

<script>

    $('.UpvoteButton').click(function () {

      $(this).toggleClass('on');

      $('.DownvoteButton').removeClass('on');

    });



    $('.DownvoteButton').click(function () {

      $(this).toggleClass('on');

      $('.UpvoteButton').removeClass('on');

    });

</script>

<% include ../partials/footer %>