Develop Reference

Using $location for only part of a page breaks back button

I want to use $location to navigate a self-contained comments section on a normal statically loaded page, but it seems to break the back back button.
The problem comes when I've navigated to a few pages using $location, then click on an external link. It goes to that link, but when I hit back, it changes the URL to the last one but doesn't actually change the page (i.e. it stays on the external page). If I then keep on clicking back, it changes the URL (so the url history is fine), but it doesn't actually load up the page from that url until I get to the first one that I've visited (if that makes sense...). So, for example:
So, navigating the app:
www.example.com - loads up my page with the comments
www.example.com?page=2 - uses $location and loads the new comments correctly
www.example.com?page=3 - uses $location and loads the new comments correctly
www.externalexamplepage.com - navigates correctly to the page.
back - changes the address to www.example.com?page=3 but stays on www.externalexamplepage.com
back - changes the address to www.example.com?page=2 but stays on www.externalexamplepage.com
back - changes the address to www.example.com and loads up the page correctly.
So, how can I get it to not break the back button? This is what I've got in my comments directive:
$scope.$on('$locationChangeStart', function(e, newUrl) {
// If moving off current page...
if ($scope.changingCommentsPage === false) {
$window.location.href = newUrl;
}
});
$scope.$on('$locationChangeSuccess', function() {
// Get current urlParams
var urlParams = $location.search();
// Get new comments if page has changed
if ($scope.page != urlParams.page || typeof urlParams.page === "undefined") {
$scope.changingCommentsPage = false;
$scope.page = urlParams.page ? urlParams.page : 1;
if ($scope.page < 1) return;
// Get comments
getComments($scope.model.page);
}
});

How to reload page when jquery.counter trigger finish.countdown event for multiple instance?

I am using multiple instance for jQuery countdown and implement page reload when counter get finished
E.g.
$('.countdown').each(function() {
var $this = $(this),
finalDate = $(this).data('countdown');
$this.countdown((finalDate), function(event) {
var days = event.strftime('%D');
$(this).find('.days').children('span').html(days);
$(this).find('.hours').children('span').html(event.strftime('%H'));
$(this).find('.minutes').children('span').html(event.strftime('%M'));
$(this).find('.seconds').children('span').html(event.strftime('%S'));
});
$(this).on('finish.countdown', function(event){
/*if(!window.location.hash && !(window.location.hash.indexOf('_loaded') > -1)) {
window.location = window.location + '#_loaded'; window.location.reload();
}*/
//If I put window location reload here it will goes into infinite loop. Also above commented code will reload page twice initially which is also not valid solution.
});
});
Issue: If countdown is already finished (E.g. 00:00:00:00 ) then page reload occur twice when script loaded at first time,
I have used localStorage concept but unable to find exact solution. Please help

I had almost this issue with page constantly reloading instantly.
Try and check if your local time and server time are the same. In my case, the difference was two hours, which was the issue that put the page into constant loop.
Countdown plugin has some notes on timezone awareness: http://hilios.github.io/jQuery.countdown/examples/timezone-aware.html

Refresh just home page

I am currently designing a system which includes a homepage that show the person who logs in only the work they have to do. I have been asked to set up this homepage to refresh every 3 minutes which I have done using this code:
function startTimer() {
var now = new Date();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var secTime = minutes*60*seconds;
if(secTime % (3*60) == 0){
var refreshTime = 3*60*1000;
} else {
var refreshTime = (secTime % (3*60)) * 1000;
}
setTimeout('refresh()', refreshTime);}
function refresh() {
window.location.href = 'myURL';
}
startTimer();
The problem I currently have is that when I navigate away from this page, but still in the system, it keeps returning me to homepage and I lose what I am working on.
Is there a way that I can keep refreshing homepage for those who haven't moved away from it and stop it when someone does?
I am very new to Javascript so please be patient if I ask a lot of question.
Thank you in advance for any help given.

I assume you are using a shared javascript file on all pages of the site which is why the timer will keep running on every page. You could make sure that the timer only runs on the homepage by checking the page url and wrap your startTimer function inside this check:
if (document.location.href == "http://www.yourhomepage.com"){
startTimer();
}
Replace http://www.yourhomepage.com with whatever url your homepage is on. This will only work if your pages are separate html files. If you are using a hashbang method whereby the document doesn't change, this will not work.

You can use Ajax to refresh the work log part of the page instead of refreshing the whole page.

When you refresh your page, your code redirect you to your home page because of window.location.href = 'myURL';. The location change, and it redirect you everytime to 'myURL'.
You would like to refresh only a part of your page. You have to send a XMLHttpRequest or Ajax request ( you load a page into your current page without reloading your current page ). https://developer.mozilla.org/fr/docs/XMLHttpRequest
When you get the page loaded, you insert the text loaded into the page.
Then, call the function which send request, every "refreshTime" like that
function sendAjax(){
// ... ajax request
// refreshTime = 3 * 60 * 1000;
setTimeout( sendAjax, refreshTime );
}
sendAjax();
Don't use quote arround the function name in setTimout. setTimemout need a function to call (not his name but his value) and time parameters.

Display last seen status of a web page using java script

I have a web page where the data gets updated upon refresh.
I want the user to when the page has been refreshed lastly.
ie if i refresh the page after 3 sec, it should display 3 sec and so on....
Example:
var current = "08/06/2014 15:00:00"; // Current time
var next = "08/06/2014 15:00:30"; //Time after Refresh
It should output
Last seen:30 sec // (15:00:30 - 15:00:00)
Is there any way to get time after refresh using javascript??

You can use HTML5 LocalStorage or Cookies for storing last seen date, example(uses LocalStorage, save last page open date and show this on next loads):
window.onload = function() {
var lastSeen = localStorage.getItem("lastSeen");
if (lastSeen) {
alert("User last seen in " + lastSeen);
} else {
alert("User first time logged in page")
}
localStorage.setItem("lastSeen", new Date());
};
See this example on jsFiddle

Back Button after re-direction

This is a follow up to my original question here. The answers proposed work in Firefox, but there are problems with at least Chrome and Safari (on iOS).
The initial issue is this: on an unrelated site (say Facebook), users can create links where the href is in the form http//www.siteA.com/?http://www.siteB.com. The intention is that siteA parses the querystring and re-directs the browser to siteB. That all works fine.
Then, when a user, having been re-directed to siteB, clicks the back button on their browser, the goal is that they should return to siteA and not be re-directed again.
The answer to my previous question proposed that at the time of the re-direction from siteA, the code on siteA checks for a cookie - if it is not there, it sets it and re-directs. If it is there, then no redirection. In order to allow the user to return to the original referring page and click the same link again (and be re-directed to siteB), it was also proposed that if the cookie is found on siteA, as well as no re-direction, the cookie is deleted.
On Firefox that all works. The 2 problems now are:
on Chrome (and maybe others), the cookie deletion either doesn't work, or works only after the user navigates to another site. The deletion code is just simple javascript, setting the same cookie with an expiry date in the past. This may in practice be a relatively minor issue, but it would be nice to find a solution.
on Safari on iOS, siteA is not in the browser history. It seems iOS (and maybe Safari generally), tries to avoid the looping problem) of returning to a page that re-directed to a second site), by omitting the re-directing page from the history stack. As a result, the pressing the back button on siteB goes to the page prior to the re-directing page. This is a major issue.
It seems there are 3 possibilities - what I want to do is not possible because it's a security risk; there's no crosss-browser/platform solution; or I've approached the goal by completely the wrong method.
The fixed points are:
the form of the URL (with a querystring containing the second URL);
no access to the server (limited to javascript/jquery).
no control over siteB (only siteA).
I'd be grateful for any suggestions and/or advice.
Thanks

This appears to be a solution to issue 2:
$(document).ready(function() {
var s = location.search;
if(s != '') {
var split = s.split('?');
var loc = split[1].replace('?', '');
if (document.cookie.indexOf('redirected=' + loc + '') == -1) {
document.cookie = 'redirected=' + loc + '';
var link = document.createElement('a');
link.href = loc;
document.body.appendChild(link);
link.click();
} else {
document.cookie = 'redirected=' + loc + '; expires=Thu, 01 Jan 1970 00:00:00 GMT';
var url = location.href.replace('' + s + '', '');
location.href = '' + url + '';
}
} else
{
//do something on the re-direction page
}
});
It's a bit old school, but instead of re-directing, you create a link on the intermediate page and click it programmatically. That works like a re-direction, but leaves the re-directing page in the history stack, even on iOS.
Thanks to this answer on SO for the hint.
Still looking for a way to remove the cookie more effectively though.
I'd be interested and grateful to read any other comments on these issues. Thanks.