We Keep Coding

Define a reference site for the history.back button

We want to have a back button in our site
but history.back in javascript does not help us.
We need this function only run on the site and if the user comes from other site, clicking the return button on the previous site should not return.
In fact, we want a return button to run on our site only.
my code is
<i class="fas fa-arrow-left"></i><span class="btn-text">Back</span>

This only works for your own made back button and won't work with the browser back button
There is two ways to achieve that: a simple but not always reliable method and a complex one but always good.
1- The simple method
You use document.referrer and ensure the domain is yours before calling history.back().
2- The complex method
You could register a JavaScript function on page load to get the first URL the internaut land which you could store using history.pushState. Before calling the back function, you could ensure this is not that page. Though, this idea is not complete as the user could probably have landed on this page twice. i.e. Home->Product->Home. I'll let you search for further code that would let you counter this problem.

This code checks the history of back button of the browser on its click event:
$('#backbtn').click(function () {
if (document.referrer.includes(window.location.hostname)) {
window.history.back();
} else {
window.location.href = "/your/path";
}
});

How to use information from the URL to click on specific button?

I'm working on a group project for a class, and we have a webpage that is split into different tabs, so it is only one webpage, but appears to be different pages using Jquery so the page doesn't have to reload when switching between tabs. The problem I am having is that one of the tabs has a form to get information from the user, then after the user clicks the submit button, the info is sent to the database using php, causing the page to reload. Then depending on if the information was successfully sent to the database, there will be either "success" or "invalid" appended to the end of the URL. If the user submits this form, we want them to automatically come back to this tab on the reload, and I have tried doing this by using a script like this:
<script>
document.getElementById("baseTab").click();
window.onload = function() {
var theurl = document.location.href;
if (theurl.includes("success") || theurl.includes("invalid") {
document.getElementById("infoTab").click();
}
};
</script>
The baseTab is the tab we want to load whenever someone first loads the webpage, unless they have just submitted the form on the infoTab page. This code structure works on a simple test webpage I run on my computer, but when I try to push it to our project repository, it will only do the "baseTab".click, and not click the "infoTab" button even if theurl includes "success" or "invalid". I tried doing it without the window.onload(), but that doesn't work either. Also, if I do
if (theurl.includes("success") || theurl.includes("invalid") {
document.getElementById("infoTab").click();
}
else {
document.getElementById("baseTab").click();
}
then neither of the buttons get clicked. If their is an easier way to do this or you see where I am going wrong, any help would be appreciated. Thanks!

back button - cookies

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.

Javascript - Reload page after form submit with target="_blank"

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.

Save record on page leave

I am saving records on save button click, if user don't click save button and navigate to another page while clicking on some link even then i want to call the save method.
How can I achieve this functionality?
please provide some sample code ...
thanks in advance for your help

You can make ajax request on
window.onbeforeunload = function(){
////make ajax request
}
Or can prevent the user by giving confirm box
function showalert() {
if (!confirm('Are you sure you want to exit without saving changes?')) {
////make ajax request
}
else {return true;}
}
window.onbeforeunload = function(){ showalert }
For example check this out when I leave this page while answering SO prevent me

Use an ajax post, triggered by window.OnBeforeUnload() to let yourself know that the user has left the page, and pass any information you need.

Well since you want to call the save method even if the user navigates to another page or link
what u need to do is set a hidden field for eg. suppose hdnSave and set its value to say 0
Now when the user navigates or clicks on any another link first check if this hidden field value(hdnSave) is set to 1 or not.If not then Call Save Method.So this hidden Field can be used as an indicator of whether Save Method has been called or not.
Similarly you can use a session(in c# code) for the same purpose as well.