Executing a Function from a separate page

Question

I'm not entire sure that this is possible, but here's what I'm looking at doing.

I have a list of buttons, that when pressed, modify a database that they are attached to, (for example, clicking button 1 would add 10 points to the score of player 1)

What I am looking to do in tandem, is to call a javascript function that lives on a separate page, a sort of a visual confirmation that the points were added to player 1's account.

Why am I organizing it like this?

I am running a Twitch channel where I am building a series of web views to display stats and information. I wish to control WHAT the audience sees from one page, and have the results display on a different page.

Here's what I have so far:

HTML (admin page):

<button class="addPoints" data-id="player1" data-name="Player 1">Player 1</button>

JS (admin page):

$(".addPoints").on('click', function(){
var $id = $(this).data('id');
var $name = $(this).data('name');
//AJAX MAGIC TO INSERT POINTS INTO DATABASE SO I CAN KEEP SCORE//
tallyPopup($id, $name);
});

HTML (display page):

<div class="displayScreen"></div>

JS (display page):

function tallyPopup(member, name){
$('.displayScreen').append(<div class='tallyPopup' id='"+member+"'><div class='portrait' id='"+member+"'></div><span class='name'>"+name+"</span><span class='score'>+10</span></div>);
$('.tallyPopup').animate({
opacity: 1
}, 3000, function(){
$(this).remove();
});
}

I know what I have does not connect the two pages, because I haven't the first clue on how to do that, if it's even possible. OR, is there a way for the Display HTML to check if the database has been updated and THEN run the tallyPopup function?

Thanks in advance.

Take a look at [this question](http://stackoverflow.com/questions/9106516/push-notifications-from-server-to-user-with-php-javascript) — Draco18s no longer trusts SE, Apr 20 '17 at 18:27

score 0 · Answer 1 · answered Apr 20 '17 at 17:24

You cannot call a function on another client (including your own clients) running your website.

To continuously check for points on the display page, use var intv = setInterval(function () {}, nMilliseconds) to repeatedly run a function until you call clearInterval(intv), which you might not do since you may want this to run forever, but perhaps only once every minute (nMilliseconds = 60000).

setInterval(function () { $.get('/point-count').then(tallyPopup) }, 60000)

tallyPopup would receive the data argument from the AJAX response.

Of course on the admin side you must fill in that line to update the amount of points via AJAX, either by PUT, POST, or PATCH. I would consider using PATCH just as a matter of semantics.

Also consider storing the return value of $(this) (var $this = $(this)) instead calling it multiple times, use promises, use CSS animations instead of $.animate (these perform much better). Consider making the element opaque and then visible (perhaps off screen when invisible), instead of using $.remove (also a performance improvement).

Executing a Function from a separate page

1 Answers1