I have a search-page, and when I get the results (100 results/page) I use a counter/cookie to see how many times the user clicked on another page result. I use this counter for the "back button" to go back to the search page (and remember the inserted search values).
If the user goes to another search-page, it's the same result-page with other results.
Two examples:
1.
searchpage > result page (counter = 1)
=> back button = window.history.go(-1);
2.
searchpage > result page (counter = 1) > another result page (counter = 2) > another result page(counter = 3)
=> back button = window.history.go(-3);
This is working fine, but now I have a problem. The user can send the result page to another user by mail, if he clicks on the result page and clicks on the back button, I can't use something like window.history.go(X);
I tried with window.location.href("[url of the searchpage]");, but how can I check in my code if the user came from the search page or from a link in a mail?
I can use document.referrer.indexOf("[url of the searchpage]"). This is ok for the first page, but not if the user goes to another page-result. Because then my document.referrer.indexOf check is always false because he never comes from the search-page.
I work with cookies, if he clicks on the "back"-button I can change the value of the cookie, but if the user just close the page and reopen another result-page, the cookies are still existing and they have a wrong value...
Any idea?
Cookies are not shared between sessions. When a user opens a website in a new browser (e.g. by clicking a link in an email) that user will start a fresh session with new cookies.
Cookies will be remembered for a period of time in the same browser, even if the user closes the tab/window and returns to it later.
For this reason, it is conventional to use URLs to remember the current pagination in search results, e.g.:
search?q=term&p=4
Then your "Go back" link would have an href value of:
search?q=term&p=3
And for the page before that
search?q=term&p=2
etc.
And to switch to the same page but for a different search term:
search?q=new-search-term&p=2
This works universally and has become a design convention. Don't reinvent the wheel! You should modify the existing program to adopt this methodology, in my opinion.
Related
There are two pages, and I want to show an alert on the first page when the user comes back from second page to first page.
I know how to go back to first page by: window.location.href
and also by: window.history.back().
But I don't know how to show an alert once it's backed?
You can simply achieve it using localStorage or sessionStorage.
// Page 1
const visited = localStorage.getItem("visited")
if(visited) alert("//Do something here, why you came back")
else localStorage.setItem("visited", "visited")
You can give the url a parameter and use it to check whether an alert message should be fired.
For example: window.location.search -> '?visited=true'
I would like to add a button that will take a user back a page OR if a user used direct url to get to that page (so, .back() would take them back to google for example) - a user will be redirected to my homepage.
Looks like javascript:history:back() or history.go accept step attributes only (how many pages we can go back) and that is it. Will I have to tap into session or is there a way to do it with history object?
You can check the referrer url with document.referrer, to see what was the previous page where the user come from. It can be empty that means user come from direct link, or clicked the link from other app links skype etc...
In the example I used https://stackoverflow.com as an example, but you can make it more universal if you use with location.origin more info
As #Jonas W. Mentioned in the comments, be sure you check the full domain in the right position in the referrer, because of security reasons.
function go() {
if (document.referrer.indexOf("https://stackoverflow.com/") === 0) {
history.back();
} else {
window.location.href = "https://stackoverflow.com";
}
}
document.querySelector('button').addEventListener('click', go);
<button>back</button>
I have ASP.NET MVC5 page with .NET Framework. 4.5.
I have a page with several labels representing users details and also i have 2 buttons - back button which call JavaScript function onClick="redirectToPreviousPage();" and i have 1 button - Confirm.
Confirm button open up a modal pop-up with few check boxes and from there users can thick them and accept the provided details with another button, called accept.
There are 4 possible pages from where users can navigate to this particular Details page and when they click back it calls "redirectToPreviousPage();" function:
function redirectToPreviousPage() {
debugger;
var previousUrl = document.referrer;
if (previousUrl !== window.location.href) {
window.location.href = previousUrl;
} else {
history.go(-1);
return false;
}
}
If users skip Confirmation and click Back document.referrer works correct and it redirect the users to the page they came from.
The problem is when users click on Confirm button and click Accept on modal dialog window.referrer point to it's self and i want to avoid that. For this purpose i'm using history.go(-1) even (-2) which should work fine, but it's not - even when URL is different than current URL and different from document.referrer URL returning to previous page isn't work.
I also read about this and tried with including return false; but i couldn't help me to.
How can i redirect users to previous page properly ?
why don't you store the previous URL and pass it round in a form post or cookie, and then have a default value for the first visit
So I want to be able to have a different styling for a link after you go to the page it's clicked on. I have been using the following code:
$(document).ready(function(){
var url = document.URL;
function contains(search, find) {
return search.indexOf(find) !== -1;
};
$('#topbar a').each(function(){
var link = $(this).attr('href');
var answer = contains(link,url);
if(answer === true){
$(this).addClass('check');
}
else{
$(this).addClass('nocheck');
};
});
});
This goes through the links in my navigation bar and checks if it's on the same page as the link, and it works, but I can't use it in one specific case: Random.
I have a link that generates a random page from the pages I have, so it does not have a specified link as it links to a function to randomly generate the page (note: I cannot change the function or access information from it).
So how can I detect that the random link was clicked previously so i can give it the .check class
If i understand your question correctly, your function does not work for the randomlink because this has a href like http://mysite.com/random, but the server will actualy redirect you to a different page, like http://mysite.com/about-me, and therefore the url of the active page does not match the href of the random button, and it will not get the active state.
One could argue if you would want it to get the active state, cause clicking it again would not (likely) bring you to the same page, but that is besides the question.
I can see to ways to solve this.
server side:
In stead of redirecting to ie. http://mysite.com/about-me in the random function, you could also redirect to http://mysite.com/about-me?random. By adding this get variable, you should not change the behaviour of the link (unless you have some very strict controller, or that variable is actually used, but that is unlikely). You could then detect with javascript if that variable is present in the url, and then activate the random button.
Something like this:
$(document).ready(function(){
var url = document.URL;
// check for random
if (url.indexOf('?random') >= 0) {
$('#topbar a.random').addClass('check');
}
// check all other
$('#topbar a:not(.random)').each(function(){
if($(this).attr('href').indexOf(url) >= 0){
$(this).addClass('check');
}
else{
$(this).addClass('nocheck');
};
});
});
cookie:
If you do not have acces to the server side random controller, you could do it entirely with javascript, by the use of a cookie (the only way I know to make a variable persist trough page requests).
On click of the random button, you would first set a random cookie to true with javascript, before letting the actual link do it's thing. On entering the page, you could then do a similar check as in my previous option, but in stead of the url you check if the cookie is tre. If so, you change it to false (so on the next page request the random button will not be active again) and set the randombutton to active.
As I believe the first solution is to be preferred (cookies should only be used as a last resort, they are sent on every page request, which means extra data, and your user might have cookies disabled, or there might be laws against using cookies, so the function could not always work), I will not write the javascript yet. Feel free to ask if you prefer this solution and need further help however.
I'm trying to achive the following:
On page A we have an access restricted Link to page B. The access restriction is handled on the server side in PHP.
When a user clicks on this link to page B we display a modal dialogue on page A (via javascript) with a form, having the link's href (B) as the action. (To give the user an immediate feedback. The fallback is to redirect him to a login form that redirects him to the site he wants to access.)
This system works quite well.
But now comes my question:
We have access restricted links that should be opened in a new window.
Now if I use target="_blank" on the form the user stays logged out on the page he came from (A), that is still open in the background.
Is there a way to reload the page (A, in the background) right after the form has been submitted to the new window (B)?
My first idea was to use window.location.reload(); in the submit handler on page A.
This didn't work in chrome and from what I understand could create a race condition.
Another idea would be to log the user in via an ajax call and open a new window through javascript. Is there a way to do this without having to deal with pop-up blockers?
I implemented the idea of lostsource (see below) with one slight addition.
As I need to reload only once, the timer of setInterval can be stopped if the cookie changed.
var ri=setInterval(function() {
if(oldCookie != document.cookie) {
// assuming a login happened, reload page
clearInterval(ri);
window.location.reload();
}
},1000); // check every second
I still love the idea. stackoverflow is awsome!
Assuming you're storing PHP session information inside a cookie, you might be able to monitor your document.cookie for changes.
Before submitting the form store the value of the current cookie and monitor it for changes with a timer:
form.onsubmit = function() {
var oldCookie = document.cookie;
var cookiePoll = setInterval(function() {
if(oldCookie != document.cookie) {
// stop polling
clearInterval(cookiePoll);
// assuming a login happened, reload page
window.location.reload();
}
},1000); // check every second
}
On the parent page, do you have any visual/functional changes because of the login? As in any new actions possible?
If not, then you dont have to do anything as you would be checking for login on every action from the parent page, you can check for permissions along with that.
If there are changes or additional functionalities, you can call a javascript function in the parent, say reloadMe, using window.opener.reloadMe()
Why not just a simple setTimeout
setTimeout(function(){ location.reload(); }, 1000);
It is a bit hacky, but seems appropriate for your situation.