How to load a server variable only after a specific event?

Question

I need the two server variables to be loaded only after the var change in the db.

Right now, they load immediately when the page is loaded and therefore keep the value they had before the event (upvotesRef.transaction).

 $('.HP').text("<%= post.upvotes - post.downvotes %> HP");

CODE:

$('.UpvoteButton').click(function () {


        var $this = $(this);
        if ($this.hasClass("on")) {
            $this.removeClass("on");
            upvotesRef.transaction(function (upvotes) {  
               if (!upvotes) { 
                  upvotes = 0; 
               } 
                 upvotes = upvotes - 1; 
                 return upvotes; 
            }); 
            userRef.remove();
            $('.HP').text("<%= post.upvotes - post.downvotes %> HP");

EDIT:

I ended up creating local variables to solve my problem. Thank you for your answers !

var upvotesLocal = <%= post.upvotes %>;
var downvotesLocal = <%= post.downvotes %>;

$('.UpvoteButton').click(function () {


        var $this = $(this);
        if ($this.hasClass("on")) {
            $this.removeClass("on");
            upvotesRef.transaction(function (upvotes) {  
               if (!upvotes) { 
                  upvotes = 0; 
               } 
                 upvotes = upvotes - 1; 
                 return upvotes; 
            }); 
            upvotesLocal = upvotesLocal -1
            userRef.remove();
            $('.HP').text((upvotesLocal - downvotesLocal) + " HP")

Have you thought of using AJAX to get the variables updated? — Dez, Nov 06 '16 at 00:41
@Dez How would I go about that ? I am not very experienced in AJAX. Could you post a solution using AJAX as an answer so I can accept it ? — Coder1000, Nov 06 '16 at 00:49
Check about jQuery AJAX calls to node.js here: https://stackoverflow.com/questions/5373987/how-to-use-jquery-ajax-calls-with-node-js , besides the answer I provided. — Dez, Nov 06 '16 at 01:17

score 2 · Accepted Answer · answered Nov 06 '16 at 01:39

you should get and update the variables AFTER the transaction right?
That means it should happen in your callback.
I assume you are using the firebase transaction method.
then your callback should be as second parameter:

$('.UpvoteButton').click(function () {


        var $this = $(this);
        if ($this.hasClass("on")) {
            $this.removeClass("on");
            upvotesRef.transaction(function (upvotes) {  
               if (!upvotes) { 
                  upvotes = 0; 
               } 
                 upvotes = upvotes - 1; 
                 return upvotes; 
            }, updateVotes); //<-- here the callback function added
            userRef.remove();

function updateVotes(error, isCommitted, upvotes) {
   //here you got already your new upvotes
   //but you should request the downvotes,
   //here you need the ajax request, see e.g. Dez's answer or comments
}

I found a more elegant solution to my problem by using local variables, thank you for your input though, it is definitely correct ! — Coder1000, Nov 06 '16 at 10:30

score 1 · Answer 2 · answered Nov 06 '16 at 01:09

Taking in count I am not experienced in node.js, what you should do is replace the $('.HP').text("<%= post.upvotes - post.downvotes %> HP"); line for an AJAX call where you get the updated variables and add them with jQuery. Something along these lines:

$('.UpvoteButton').click(function () {

        var $this = $(this);
        if ($this.hasClass("on")) {
            $this.removeClass("on");
            upvotesRef.transaction(function (upvotes) {  
               if (!upvotes) { 
                  upvotes = 0; 
               } 
                 upvotes = upvotes - 1; 
                 return upvotes; 
            }); 
            $.ajax({
                type : 'POST',
                data: { userRef: userRef},
                contentType: 'application/json',
                url: 'http://localhost:3000/endpoint',      
                success: function(data) {
                    console.log('success');
                    console.log(JSON.stringify(data));
                    /* Do whatever you need with your data, for example*/
                    $('.HP').text(data.upvotes + "-" + data.downvotes + "HP");
                },
                error : function (event) {
                    console.log(event);
                }
            });
            userRef.remove();
            ...
}

In the node.js side you will need something along these lines:

app.post('/endpoint', function(req, res) {
  console.log(req.body.userRef)
  /* Get the upvotes and downvotes and send them back in the response */
  res.contentType('json');
  res.send({ some: JSON.stringify({response:'json'}) });
});

I am sorry for not being to able to show an exact functioning answer.

How to load a server variable only after a specific event?

2 Answers2