Sending ajax call when active? - javascript

Hey, i just noticed something on facebook.com, facebook was in my other tab, and i was browsing on SO, after a while i switched back to facebook.com and it like fades in new news in the wall. How did they make a script that knows when you are active again without clicking anywhere it shall refresh new messages etc. ? Just like facebook chat also if you have it on another tab/window then you'll hear "blub" or Facebook: **NEW MESSAGE FROM: name. How does it do that?
Do it run a timeout checker each second, i dont think so ? , that would be really alot of traffic and server response time, if around 3-4-500 million users would do that each day.
Could someone provide example where to place ajax call if it the user has left the focus and its getting onfocus again, how to make a code that runs a ajax call there? jquery?

Would this not work using the focus event on the window object? ie:
window.onfocus = refreshStuff;
where refreshStuff is your function for refreshing...err...stuff.
https://developer.mozilla.org/en/DOM/window
http://msdn.microsoft.com/en-us/library/ms536934(v=VS.85).aspx
Sorry - I would have added this to the comments, but I can't - possibly because I don't have enough reputation yet.

Related

page remembers last api call & re-calls on re-open

I have a Vue3 site designed to hold embedded tableau dashboards. When a user clicks a link on the menu page, a page opens that's basically an empty shell. With the link's props, I fetch a tableau token, construct the api call, and populate a div with the response. Starting a week ago, the site's doing something new, and it's happening the same on Chrome, Firefox, and Safari.
This is what happens now: the user clicks a menu link, frame page opens with requested report. If they return to menu and click new link, the frame page re-opens and immediately the page fires the api call from the previous visit. (There's nothing in Store or cookies that saves the url the page constructs on-the-fly, so I'm not even sure where the browser is getting the full url for that re/call.) Since tableau's tokens expire in seconds, this re/call fails -- meanwhile, the page continues, constructing the new (correct) url+token and retrieving the requested dashboard.
So in the embed div, now there's one dashboard reporting an error b/c the token expired -- and if the user scrolls past that, they'll see a second dashboard in the div, and this is the one they actually requested.
On top of all that, this ghost api call doesn't change. If the first call was for reportA, and the user leaves-and-returns for reportB, the frame page calls reportA at the top. If the user leaves-and-returns now requesting reportC, the frame page still calls reportA at the top -- and it'll keep doing that even if the user revisits with a reportA request. The only way to clear it is by refreshing the page (and then it just starts all over again).
For now, I'm weaseling around the issue like so:
created() {
if (this.$cookie.getCookie('redo')) {
console.log('B) remove cookie');
this.$cookie.removeCookie('redo');
} else {
console.log('A) set cookie');
this.$cookie.setCookie('redo', true);
location.reload();
}
Which is less of a solution and more of an unhappy hack to plug the dam while I figure out where all the water came from. What's especially weird is when I backed up to a commit from before the problem first appeared, the site still does the ghost call. I've broken a lot of sites in a lot of crazy ways in my years, but I've never run into a case like this, and I haven't the first clue how to solve it, because I haven't the first clue what's causing it.
Any and all help is greatly appreciated. /tears hair

Call function in another website from a button on my site?

So, to be specific, this site: https://www.overbuff.com/players/pc/Hizu-1730
Has a button right below the "Player X hours ago" which lets you update the info on that profile.
I see that the little button has data-type refresh-button, data-action {sameurl}/refresh and data-autoclick false.
Now I tried just opening https://www.overbuff.com/players/pc/Hizu-1730/refresh but that did nothing, so I'm a bit lost.
I want to be able to click on a button on my own site that refreshes the info on the overbuff profile (so, simulate pressing that little button).
Is that possible?
Via some kind of request or cUrl or something like that?
My site is just a little collection of 6 overbuff profiles (mine and my friends) collected via cUrl, it's easier for us to check everyones profile in just a single page than going to every profile one by one on the real site.
The only problem is that, this way the profiles are not updating, as you have to manually press that button which only works on the real site.
So I would like to add an update button to be able to refresh the info via my site.
Sorry for the poor english :)
When inspecting the element, and traking the network requests, you can see that te request is made by POST

HTML5/Javascript: Content changing without adress changing

I have a question which I haven't been able to find the answer for. I hope you can help me.
I am about to build a simple website, containing text and hyperlinks. I want the site to have the same adress no matter which hyperlink is clicked. For example, if my website is www.website.com - when one clicks a hyperlink, the content of the whole page should change, but the adress should still be www.website.com, instead of www.website.com/hyperlink.html for example. In other words, I want to disable people to use the "back" button to return to an earlier page, and prevent them from navigating the page by writing in the adress bar. They should experience a single page, but still be able to navigate through a lot of changing content through links - which means that if they click the "back"-button, they will be navigated away from the website, and if they refresh the page, it will go back to 'index'. Can you point me in the right direction to which methods might be useful here? Earlier, I would have done it in Flash, and embedded the flash-construction into the website, but as far as I have heard, Flash is not the best solution anymore?
Thanks in advance.
First of all, that is not the best idea for SEO.
But that puts aside, you should use javascript to make AJAX call and alter the partial part of your page with the response.
So basically, what you will do is from your home page, capture all link clicked event, and process the request through an AJAX call, and display the result of that call on the same page.
That allow you to refresh a list of item, or a menu, or the entire page if you want.
Since it will be AJAX call, the user won't see any difference in the URL.

Facebook FB.login() Popup Won't Close in IE8

I've searched for answers to this -- seems like all the answers relate to the old Facebook API so the solutions are no longer relevant.
The problem I'm having: I've got a custom Facebook tab which has a button on it that, when clicked, triggers FB.login(). The way it should work is: user clicks to log in, popup comes up to authorize the app, user clicks authorize, the popup closes. This flow works correctly on all browsers except IE8 and below. On IE8, the user clicks to log in, the popup comes up to authorize the app, the user clicks authorize, then the content INSIDE the popup refreshes with the content from the redirect URL. Needless to say, this is not the desired experience for IE8 users :(
I've tried everything I could find: doublechecked that there are no javascript errors, ensured that there is a valid channel file, etc. Nothing appears to fix it. Everything is happening through secure (https), so I'm not sure if that has anything to do with it.
I've been trying to fix this for DAYS now; any help would be GREATLY appreciated!
Make sure fb-root element is only once in your page , I have faced this issues and when i made sure that fb-root div is only once the issue got resolved
You should specify a p3p header in all responses from your web server. Please see: http://www.hanselman.com/blog/TheImportanceOfP3PAndACompactPrivacyPolicy.aspx.
By "the content INSIDE the popup refreshes with the content from the redirect URL" do you mean that you are passing a redirect URL? If so, don't do that. The popups work using some cross-domain JavaScript magic with a specially constructed redirect URL. If you put your own, then the popups may break.
Also, make sure you're setting a proper channelUrl when you call FB.init().

Detect when a user leaves a website

I am trying to create my own website access library (for fun) like Google Analytics where I can detect when a user accesses my website, what pages they view etc.
Is there a way to determine when the user leaves a page &/or leaves the website for good?
I have successfully coded (in python) the detecting when the user 1st accesses my site (using a cookie) & how to determine what pages they view. But I don't know how I could detect when they user leaves the website for good?
Is there a way in javascript (maybe I can detect when the page/url is changing?). I know in HTTP there is a referrer header that tells me where the user came from, maybe when the user moves to another website (outside of mine), I can be notified of this (because I will be the referrer in that HTTP request)? Am I correct?
Using jquery you can trigger this:
$(window).bind('beforeunload', function() {
// ajax call perhaps
// triggering a write to db or filesystem...
});
Pure javascript way:
<html>
<head>
<script>
function closeIt()
{
return "Any string value here forces a dialog box to \n" +
"appear before closing the window.";
}
window.onbeforeunload = closeIt;
</script>
</head>
<body>
<a href="http://www.somewhere.com">Click here to navigate to
www.somewhere.com</a>
</body>
</html>
As long the user plays by the rules you expect the onbeforeunload will work. That means, closing a tab, or closing the window, or navigating to another site.
However, you have no way to detect this reliably with javascript, onbeforeunload doens't fire in many cases, such as shutting down the browser (ctrl+q), browser crash, history (back) and opera and some versions of chrome have limited support to onbeforeunload.
If you want to detect it with high precision, you must send Ajax requests periodically that shows the user is "still alive". register those requests in a database or file and analyze it by the time sequence.
So, if you "ping" the database every 20 seconds you can know from pretty simple queries that the browser hasn't "pinged" after a short while, and determine the user is no longer in the site.
You can mark all links on your site as inner or outer links. They must point to your site, but then redirect to location, selected by user. Before redirection you can point that user left away from your site.
But.
I'd better putted on every page on your site a little script which (say every 20-30 sec) make a GET request to specific url on your site. So you can track number of each user requests.
There is an unload event you can handle in JavaScript. For example:
window.onunload = unloadPage;
function unloadPage()
{
alert("unload event detected!");
}
Unfortunately, there is no way to tell where the user is actually going when they leave the current page (unlike a referrer, when you enter the page).
One idea is, to set a variable (perhaps in database) in the unload handler (via AJAX call or what not), and then remove it if user enters another page shortly after that. Whichever record is not removed (or deactivated - soft deletes) is your last exit event before the user actually bounced off your web site or closed the browser.
You can bind to the window.beforeunload or window.unload.
Neither of these methods are very reliable though.

Categories