在Node.js / EJS中单击按钮时如何触发Firebase POST请求 [英] How to trigger a Firebase POST request when a Button is clicked in Node.js / EJS

问题描述

编辑：

实际上还有一些问题。真正的问题实际上是Firebase安全规则。所有在这里解决：中放置一个Node.js变量？$ / $> $ b $放置一个node-js-variable-inside-my-script- b

CODE：

 < script src =https://ajax.googleapis.com/ AJAX /库/ jquery的/ 2.1.1 / jquery.min.js>< /脚本> 
< script src =https://www.gstatic.com/firebasejs/3.5.0/firebase.js>< / script> 
 
< script> 
 //初始化Firebase 
 // TODO：替换为您项目的自定义代码段
 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> 
 < span class =UpvoteButton> < / span>< span class =DownvoteButton> < /跨度> < span class =HP><％= post.upvotes  -  post.downvotes％> HP< /跨度> 
< / div> 
 
< / div> 
 
< script> 
 $ b $ var upvotesRef = firebase.database（）。ref（posts / fun /<％= id％> / upvotes）; 
 var downvotesRef = firebase.database（）。ref（posts / fun /<％= id％> / downvotes）;点击（函数（）{
 
 upvotesRef.transaction（函数（upvotes）{
 if（！upvotes）{
 
 $（'。UpvoteButton'）） b $ b upvotes = 0; 
} 
 upvotes = upvotes  -  1; 
 return upvotes; 
}）; 
}）; 
 
< / script> 
  

EDIT:

There were actually still some issues. The real problem was actually the Firebase security rules. All was solved here : How to put a Node.js variable inside my <script></script>?

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

解决方案

The Solution was to keep all the code in plain javascript between the <script></script> tags and initialise firebase also in my ejs file.

The problem was really about Firebase security rules.

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

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's 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>

这篇关于在Node.js / EJS中单击按钮时如何触发Firebase POST请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！