Coder1000 Coder1000 - 1 month ago 6
Javascript Question

How to trigger a Firebase POST request when a Button is clicked in Node.js / EJS

QUESTION:

How to trigger a Firebase POST request when "UpvoteButton" or "DownvoteButton" is clicked ?




WHAT I TRIED:

UPDATE 4:

I think I am making progress. Find the updated code below. Now I get the error:

SyntaxError: Unexpected token ; in ... while compiling ejs


CODE:

<% include ../partials/header %>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.5.0/firebase.js"></script>

<script>

<% var config = { %>
<% apiKey: "info", %>
<% authDomain: "info", %>
<% databaseURL: "info", %>
<% storageBucket: "info", %>
<% messagingSenderId: "info" %>
<% }; %>
<% firebase.initializeApp(config); %>

</script>

<div class ="containerMarginsDetails">

<h1 class= "detailsTitle"><%=post.title %></h1>
<div class="row">
<img class = "postImg" src="/images/uploads/<%= post.image %>">
<span class="UpvoteButton"> </span><span class="DownvoteButton"> </span> <span class="HP"><%= post.upvotes - post.downvotes%> HP</span>
</div>

</div>

<script>

<% var upvotesRef = firebase.database().ref("posts/section/"+id+"/upvotes"); %>
<% var downvotesRef = firebase.database().ref("posts/section/"+id+"/downvotes"); %>

$('.UpvoteButton').click(function () {
<% if(authdata == null) { %>
window.location.href = "/users/login";
<% } else { %>

var $this = $(this);
var $other = $('.DownvoteButton');

if ($this.hasClass("on")) {
$this.removeClass("on");

<% upvotesRef.transaction(function (upvotes) { %>
<% if (!upvotes) { %>
<% upvotes = 0; %>
<% } %>
<% upvotes = upvotes - 1; %>
<% return upvotes; %>
<% }); %>

} else if (!$this.hasClass('on') && $other.hasClass("on")) {
$this.addClass('on');
$other.removeClass("on");

<% upvotesRef.transaction(function (upvotes) { %>
<% if (!upvotes) { %>
<% upvotes = 0; %>
<% } %>
<% upvotes = upvotes + 1; %>
<% return upvotes; %>
<% }); %>

<% downvotesRef.transaction(function (downvotes) { %>
<% if (!upvotes) { %>
<% downvotes = 0; %>
<% } %>
<% downvotes = downvotes - 1; %>
<% return downvotes; %>
<% }); %>

} else {
$this.addClass('on');

<% upvotesRef.transaction(function (upvotes) { %>
<% if (!upvotes) { %>
<% upvotes = 0; %>
<% } %>
<% upvotes = upvotes + 1; %>
<% return upvotes; %>
<% }); %>
}
<% } %>
});

$('.DownvoteButton').click(function () {
<% if(authdata == null) { %>
window.location.href = "/users/login";
<% } else { %>
var $this = $(this);
var $other = $('.UpvoteButton');
if ($this.hasClass("on")) {
$this.removeClass("on");
} else if (!$this.hasClass('on') && $other.hasClass("on")) {
$this.addClass('on');
$other.removeClass("on");
} else {
$this.addClass('on');
}
<% } %>
});

</script>

<% include ../partials/footer %>

Answer

SOLUTION:

I found the solution.

1) I deleted this (since I already had it in my app.js):

<script>

<% var config = { %>
<%    apiKey: "info", %>
<%    authDomain: "info", %>
<%    databaseURL: "info", %>
<%    storageBucket: "info", %>
<%    messagingSenderId: "info" %>
<% }; %>
<% firebase.initializeApp(config); %>

</script>

2) And then created a global variable "firebase" in my app.js like this:

(This was already in my app.js along with the config init, etc...):

var firebase = require("firebase")

So I just had to add:

global.firebase = firebase;

I can now use firebase functions in any file.

Problem solved !


N.B:

The "SyntaxError: Unexpected token ; in ... while compiling ejs" error was due to the way I used <% and %> around my config. It should have been:

<% var config = { 
    apiKey: "info", 
    authDomain: "info", 
    databaseURL: "info", 
    storageBucket: "info", 
    messagingSenderId: "info" 
 }; %>
<% firebase.initializeApp(config); %>

But that code was anyway useless since I already had it in my app.js


N.B.2:

If you look at the original versions of my question (before update 4), you will see my code wasn't working because I had not surrounded my firebase code by <% and %> as should be done in EJS. (There was more to it, but not necessarily directly relevant to my question, let's just say I spent some time debugging since I am relatively new to Node.js).

Comments