Develop Reference

Is there anyone who can help me get this setinterval fuction working?

I am pretty new to this whole jquery and javascript thing as I have really worked with server side languages. However, I have a challenge here where If the specific data received($status) is not the same with the one provided(queu or successf), the page should reload to fetch the data($status), and it should do this to a set number of time, if it reloads the page according to the number of time set; whether or not the data($status) is returned true, I want it to entirely stop reloading the page and exit.I have tried doing it this way; but I am not quite sure what I am missing.
$(document).ready(function($) {
var number_of_time_loaded = 7000;
var queue = '$status';
var inter;
if (queue == 'queu' || queue == 'successf') {
alert('successfully uploaded');
} else {
alert('kindly wait for some minutes');
for (;number_of_time_loaded < 70000;) {
inter = setInterval(function() {
window.location.reload(1);
}, number_of_time_loaded++);
if (number_of_time_loaded >= 21000) {
clearInterval(inter);
} else {
number_of_time_loaded++
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

So you checking a variable that is written by PHP. You are saying if this variable is not a certain value, you want the page to reload after a set period of time. Refreshing the page will reset the JavaScript variables so you would have to use local storage to keep the state.
var maxAttempts = 10;
var queue = "<?php echo $status; ?>";
if (queue == 'queu' || queue == 'successf') {
// it is updated
console.log("Updated);
sessionStorage.removeItem("attempts");
} else {
var currentAttempts = sessionStorage.getItem("attempts") || 0;
currentAttempts++;
if (currentAttempts < maxAttempts) {
console.log("waiting for another attempt");
sessionStorage.setItem("attempts", currentAttempts);
window.setTimeout(function () { window.location.reload(); }, 5000); // wait 5 seconds
} else {
// too many attempts made
console.log("too many attempts made");
sessionStorage.removeItem("attempts");
}
}
Better solution would be an Ajax request instead of refreshing the page. An
other option is setting meta refresh header in PHP and not having to use JavaScript.
So in the PHP if variable is not set, you echo out <meta http-equiv="refresh" content="5">

Can we have code after location.reload(true)?

I have a function that does a reload from server with:
location.reload(true)
Currently, any code I have after this line is not executed.
I'm curious if there is a way to be able to have more code run after the reload?

The best way to do this would be to write a function that is called if there are certain "GET" variables set and to check them on each run such as mypage.html?reload=true
Or even hash locations: mypage.html#reload
And you can compare like so:
$(document).ready(function () {
if (window.location.hash == '#reload') {
onReload();
}
});
function onReload () {
console.log('test');
}
function reload () {
window.location.hash = 'reload';
window.location.reload();
}
Just call the reload(); function.
Output (in console): test
And then you can just redirect people away from the hash #reload if you don't want your function to run if the page is refreshed again: window.location.hash = '';

why you need execute something after reload the page?
If you need to do something after reload, so you can pass some parameter to the page and check this to execute something additional. You can redirect to the same page and pass a complete url
var url = window.location.href;
url += '&param=1'
window.location.href = url;
So, when your page reload, you can check a parameter by GET and do whatever you want. I hope this trick help you!

________________METHOD 1: WITH PHP_________________
1) reloading with a parameter
2) getting that parameter with PHP
For example:
window.location.href += '&reloading=1';
//it's equivalent to:
//window.location.href = window.location.href + '&reloading=1';
And then:
<?php
if (isset($_GET['reloading'])) {
echo '<script>pageReloaded();</script>';
}
?>
Since PHP will be executed first, that little script (the function call) will be writen and then executed in javascript, so pageReloaded() function will be called.
A full example would be:
<?php if (isset($_GET['reloading'])) echo '<script>pageReloaded();</script>'; ?>
<script>
function reloadNow(){
alert("I'm about to reload");
window.location.href += '&reloading=1';
}
function pageReloaded(){
alert("I've been reloaded!");
}
</script>
<button onclick="reloadNow()">Press to reload</button>
________________METHOD 2: NO PHP, ONLY JAVASCRIPT_________________
Using SessionStorage
1) Set SessionStorage.
2) Reload
3) Get that SessionStorage
For example:
<script>
function reloadNow(){
alert("I'm about to reload");
sessionStorage.setItem('reloading',"true");
window.location.reload(true);
}
//when loading:
if (sessionStorage.getItem('reloading') === "true") {
sessionStorage.clear(); //so it doesn't trigger next time
alert("I've been reloaded!");
}
</script>
<button onclick="reloadNow()">Press to reload</button>

setTimeout placed in header , how can i restrict to run 1 time

How can i make sure this doesn't execute again. I am redirecting all my pages to a single page on my site. It keeps refreshing/reloading that page because the script is placed in the header and must be.
setTimeout(function(){
window.location="mysite/page";
},1000);

You can add an hash to your url when you refresh the page:
<html>
<head>
<script type="text/javascript">
var loc = window.location.href;
if (loc.indexOf ("#DoNotRefresh") < 0) {
setTimeout(function(){
window.location="#DoNotRefresh";
},1000);
}
console.log(new Date());
</script>
</head>

Cant you just check to see if the location is already set?
if(window.location !== 'mysite/page')
{
setTimeout(function()
{
window.location = 'mysite/page';
}, 1000);
}

window.location.href not being assigned / redirected

This is a followup to a prior question that you guys answered a few weeks ago. There is HTML in a WordPress.org app which I cannot change. A section in this HTML contains text that is hyperlinked to someURL. I want the URL to redirect to my referrer page in order to return to whatever page I cam from when I click on this link. The problem is that something is blocking the assignment of my referrer URL string to HREF. I stepped through this function a hundred times in the Chrome debugger, and tried various thing (see below). HREF simply will not change, not matter what. Any idea why? here is the code, and thank you for any any help on this:
window.onload = function () {
document.querySelector(".button.wc-backward").onclick = function() {
var URLstring = document.referrer; // works fine
window.location.href = URLstring; // ref unchanged
setTimeout(function () {
window.location.href = URLstring; },100); // same result
return false;
}
}

There is no issue with you jscode, I have added it to here:
Example on github
And it is working. (You will be redirected back to stackoverflow).
<html>
<head>
</head>
<body>
<script>
window.onload = function () {
document.querySelector(".button.wc-backward").onclick = function() {
var URLstring = document.referrer; // works fine
window.location.href = URLstring; // ref unchanged
setTimeout(function () {
window.location.href = URLstring;
}, 100); // same result
return false;
}
}
</script>
the link
</html>

You code is wokring... do you like to try this one too
window.location.assign(URLstring)

using onbeforeunload event, url change on selecting stay on this page

Rewriting the question -
I am trying to make a page on which if user leave the page (either to other link/website or closing window/tab) I want to show the onbeforeunload handeler saying we have a great offer for you? and if user choose to leave the page it should do the normal propogation but if he choose to stay on the page I need him to redirect it to offer page redirection is important, no compromise. For testing lets redirect to google.com
I made a program as follows -
var stayonthis = true;
var a;
function load() {
window.onbeforeunload = function(e) {
if(stayonthis){
a = setTimeout('window.location.href="http://google.com";',100);
stayonthis = false;
return "Do you really want to leave now?";
}
else {
clearTimeout(a);
}
};
window.onunload = function(e) {
clearTimeout(a);
};
}
window.onload = load;
but the problem is that if he click on the link to yahoo.com and choose to leave the page he is not going to yahoo but to google instead :(
Help Me !! Thanks in Advance
here is the fiddle code
here how you can test because onbeforeunload does not work on iframe well

This solution works in all cases, using back browser button, setting new url in address bar or use links.
What i have found is that triggering onbeforeunload handler doesn't show the dialog attached to onbeforeunload handler.
In this case (when triggering is needed), use a confirm box to show the user message. This workaround is tested in chrome/firefox and IE (7 to 10)
http://jsfiddle.net/W3vUB/4/show
http://jsfiddle.net/W3vUB/4/
EDIT: set DEMO on codepen, apparently jsFiddle doesn't like this snippet(?!)
BTW, using bing.com due to google not allowing no more content being displayed inside iframe.
http://codepen.io/anon/pen/dYKKbZ
var a, b = false,
c = "http://bing.com";
function triggerEvent(el, type) {
if ((el[type] || false) && typeof el[type] == 'function') {
el[type](el);
}
}
$(function () {
$('a:not([href^=#])').on('click', function (e) {
e.preventDefault();
if (confirm("Do you really want to leave now?")) c = this.href;
triggerEvent(window, 'onbeforeunload');
});
});
window.onbeforeunload = function (e) {
if (b) return;
a = setTimeout(function () {
b = true;
window.location.href = c;
c = "http://bing.com";
console.log(c);
}, 500);
return "Do you really want to leave now?";
}
window.onunload = function () {
clearTimeout(a);
}

It's better to Check it local.
Check out the comments and try this: LIVE DEMO
var linkClick=false;
document.onclick = function(e)
{
linkClick = true;
var elemntTagName = e.target.tagName;
if(elemntTagName=='A')
{
e.target.getAttribute("href");
if(!confirm('Are your sure you want to leave?'))
{
window.location.href = "http://google.com";
console.log("http://google.com");
}
else
{
window.location.href = e.target.getAttribute("href");
console.log(e.target.getAttribute("href"));
}
return false;
}
}
function OnBeforeUnLoad ()
{
return "Are you sure?";
linkClick=false;
window.location.href = "http://google.com";
console.log("http://google.com");
}
And change your html code to this:
<body onbeforeunload="if(linkClick == false) {return OnBeforeUnLoad()}">
try it
</body>

After playing a while with this problem I did the following. It seems to work but it's not very reliable. The biggest issue is that the timed out function needs to bridge a large enough timespan for the browser to make a connection to the url in the link's href attribute.
jsfiddle to demonstrate. I used bing.com instead of google.com because of X-Frame-Options: SAMEORIGIN
var F = function(){}; // empty function
var offerUrl = 'http://bing.com';
var url;
var handler = function(e) {
timeout = setTimeout(function () {
console.log('location.assign');
location.assign(offerUrl);
/*
* This value makes or breaks it.
* You need enough time so the browser can make the connection to
* the clicked links href else it will still redirect to the offer url.
*/
}, 1400);
// important!
window.onbeforeunload = F;
console.info('handler');
return 'Do you wan\'t to leave now?';
};
window.onbeforeunload = handler;

Try the following, (adds a global function that checks the state all the time though).
var redirected=false;
$(window).bind('beforeunload', function(e){
if(redirected)
return;
var orgLoc=window.location.href;
$(window).bind('focus.unloadev',function(e){
if(redirected==true)
return;
$(window).unbind('focus.unloadev');
window.setTimeout(function(){
if(window.location.href!=orgLoc)
return;
console.log('redirect...');
window.location.replace('http://google.com');
},6000);
redirected=true;
});
console.log('before2');
return "okdoky2";
});
$(window).unload(function(e){console.log('unloading...');redirected=true;});

<script>
function endSession() {
// Browser or Broswer tab is closed
// Write code here
alert('Browser or Broswer tab closed');
}
</script>
<body onpagehide="endSession();">

I think you're confused about the progress of events, on before unload the page is still interacting, the return method is like a shortcut for return "confirm()", the return of the confirm however cannot be handled at all, so you can not really investigate the response of the user and decide upon it which way to go, the response is going to be immediately carried out as "yes" leave page, or "no" don't leave page...
Notice that you have already changed the source of the url to Google before you prompt user, this action, cannot be undone... unless maybe, you can setimeout to something like 5 seconds (but then if the user isn't quick enough it won't pick up his answer)
Edit: I've just made it a 5000 time lapse and it always goes to Yahoo! Never picks up the google change at all.