Coder1000 Coder1000 - 1 month ago 7
CSS Question

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

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 ?

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 %>
Comments