在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屋!