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

Question

EDIT:

There were actually some problems. The real problem was actually Firebase security rules. Everything was decided here: How to put the Node.js variable inside my <script> </script>?

Question:

How do I call a Firebase POST request when I click the UpvoteButton or DownvoteButton button?

---

WHAT DID I SAY:

UPDATE 4:

I think I'm moving forward. Find the updated code below. Now I get the error message:

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 1

The solution was to save all the code in plain javascript between the <script></script> and initialize firebase also in my ejs file.

The problem was really in the Firebase security rules.

Find the detailed answer here: How to put the Node.js variable inside my <script> </script> </a>

CODE:

 <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> // Initialize Firebase // TODO: Replace with your project customized code snippet 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/fun/<%=id%>/upvotes"); var downvotesRef = firebase.database().ref("posts/fun/<%=id%>/downvotes"); $('.UpvoteButton').click(function () { upvotesRef.transaction(function (upvotes) { if (!upvotes) { upvotes = 0; } upvotes = upvotes - 1; return upvotes; }); }); </script> 

Answer 2

You must initialize firebase by calling firebase.initializeApp(...)

Just like the guides telling us:

`

 // TODO: Replace with your project customized code snippet <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script> <script> // Initialize Firebase var config = { apiKey: '<your-api-key>', authDomain: '<your-auth-domain>', databaseURL: '<your-database-url>', storageBucket: '<your-storage-bucket>' }; firebase.initializeApp(config); </script>` 

https://firebase.google.com/docs/web/setup