Changing refresh time within Javascript - javascript

I have a web page that monitors a process and refreshes every ten seconds. To do this I simply have a statement in the <Head> section of the HTML: <meta http-equiv="refresh" content="10">
This works fine, but...
I have a button on the page that allows for a remote reset of the system. In order to confirm this action, I have a modal page that pops up asking the user to confirm. However, if the original page has been displayed for, say, nine seconds, the modal page shows for only one second before being refreshed and disappearing!
Is there a simple way that I can disable the page refresh while the modal page is displayed, and then restart it once the confirmation has been given?

You need some javascript to handle the pause of the page.
As a note you should probably handle the refreshing of the content with an Ajax call or similar, and then update the content that way. As a note W3C has a note concerning the refresh value.
Note: The value "refresh" should be used carefully, as it takes the control of a page away from the user. Using "refresh" will cause a failure in W3C's Web Content Accessibility Guidelines.
A simple solution could be to stop the window from refreshing when the modal is open and resume the refresh functionality when the user dismisses the modal.
<head>
<meta http-equiv="refresh" content="1">
<title>Refresh page</title>
</head>
<body>
<p id="demo"></p>
<button onclick="stopRefresh()">pause</button>
<button onclick="startRefresh()">start</button>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = "" + d.getTime();
const stopRefresh = () => {
window.stop(); // Use this to stop the refresh: when modal opens
}
const startRefresh = () => {
document.location.reload(); // Resume the refresh: when modal closes
}
</script>
</body>

Related

javascript location.reload doesn't reload the page in a wrong way

I'm trying to refresh a page every time a user click the button so the page is set back to source code. but the location.reload() is executed after the code, and not at the beginning.
btn.addEventListener("click", () => {
location.reload()
//code...
}
Why does not reload the page immediately when the button is clicked, but only when the function ended?
Is there another way to set the page back to the source code?
why does not reload the page immediately when the button is clicked but only when the function ended?
Because JavaScript blocks navigation.
If it didn't, then the page would reload and the rest of the function wouldn't run at all (because the page it was running in has been destroyed and a new version loaded instead).
If you want to cause the page to reload and then a function to run on the new page, then you need to pass the instruction to run that function to the newly reloaded page (e.g. via sessionStorage).
When the page loads (e.g. wait for a DOMContentLoaded event), check for the instruction, act on it if needed, then delete the instruction so it won't trigger automatically next time the page loads from another mechanism).
This here seems to work but you would have to implement it in a way so that btnClicked is not always true to execute the other code. Wrapping it around the if to check 'true'. Then it reloads the page without going to the else. Setting the btnClicked to false will run the else code without reloading the page.
Hopefully this can give you an idea!
<!DOCTYPE html>
<html>
<body>
<button class="btn" >Click to reload page</button>
<p class="text">Original Text</p>
<script>
const btn = document.querySelector('.btn');
const text = document.querySelector('.text');
btn.addEventListener("click", () => {
var btnClicked = true
if(btnClicked == true){
location.reload()
} else {
text.innerHTML = 'New Text';
}
})
</script>
</body>
</html>

HTML onload popup message

<script type="text/javascript">
<!--
function FP_popUpMsg(msg) {//v1.0
alert(msg);
}
// -->
</script>
</head>
<body style="background-color: #800080" onload="FP_popUpMsg('test message')">
This popup window appears on load of the webpage. I want to format this so that the user cannot access the page unless they click the OK button in the popup. Presently they can click the X in the browser (top right) and still get in
You could always use confirm, which returns true if the 'ok' button was clicked and false if the close or cancel buttons were clicked. MDN has a page on it: https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm. The question at How to stop page load in html static page has some solutions for stopping a page from loading, though they seem hackish and bound to fail at some point. Another solution to that part of the problem would be to redirect to a dedicated page; see How to redirect to another webpage in JavaScript/jQuery? for more.
A sample solution (pure JS, no libraries used here)
<html>
<head>
<script type = "text/javascript">
function redirIfNotConfirmed(msg) {
var confirmed = confirm(msg);
if (!confirmed) window.location.href = "http://my.website.com/dummy_redir_page";
}
redirIfNotConfirmed("click ok to proceed");
</script>
</head>

JavaScript Timers and Page Navigation

Hopefully a simple question; if I create a timer using JavaScript embedded within my page, and I then navigate away from that page, will the timer be automatically cancelled or will it continue to run?
EDIT
Expanding the question, if that page were to perform a post-back (in my case, this is ASP.NET Forms), and the script is rendered as a part of the page markup, would the original timer created when the form is first displayed be cancelled during that post-back or would a second timer be created?
Example (rough typed):
<body>
...
<script type='text/javascript'>
function doSomething() { ... }
x = setInterval(doSomething(), 60000);
</script>
...
<button type="submit" />
...
</body>
Following the post-back, a new timer will be created as a result of the page being re-rendered, how many timers are now running (assuming the post-back was within the interval specified by the timer)?
It'll be automatically cancelled. JavaScript code is executed within the context of a page.
Think about a page like an application. Switching to other page is like closing an application and opening a new one. This also applies to a full page refresh (i.e. when you press F5).

Open window in new tab without user event

Here I have two asp.net mvc websites . From first website i have one link to second website. So first website will call the second's action. I want to open on page in new tab and current tab should redirect to my first website. This action will return one view.
My approaches in view
1.
$(document).ready(function (e) {
window.open("/newpage");
window.open("/site1", "_self");
});
Browser popup blocker will block this. Because there is no user event . So I tried different approach
2.
$(document).ready(function (e) {
$("#input").on("click", function () {
window.open("/newpage");
window.open("/site1", "_self");
});
$("#input").trigger("click");
});
<label id="input" style="display:none;">test one</label>
I have triggered one event. But still its blocked. This two approaches is working fine if popup blocker is disabled.
I want to open page in new tab without disable the popup blocker.
NOTE: This two website comes under same domain name . eg: abc.com\siteone and abc.com\sitetwo
From first website i have one link to second website. So first website will call the second's action. I want to open on page in new tab and current tab should redirect to my first website.
The way I've done this the once or twice that I had a really good use case for it was to use a link element with a click handler: The click handler opens the new window, and the link element's default action follows the link, taking the existing window to the new location. That way, it is a user-initiated action. This works in every browser I've tried it in. I should note that it tends not to work in things like jsFiddle or jsBin, because of how they wrap things.
So in your case, the link's href would be where you want them to go on the first website, and the window.open would be for the second website.
Example:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Double</title>
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
Click me
<script>
document.querySelector("a").addEventListener(
"click",
function() {
window.open("http://google.com");
},
false
);
</script>
</body>
</html>

How to detect loading state of a Google Doubleclick for Publishers DFP Ad?

We have a series of DFP ads on a page that get refreshed automatically using the javascript refresh() call each time a user clicks each thumbnail icon on a gallery viewer:
googletag.pubads().refresh();
The problem is that if a user clicks through the gallery quickly, the ads keep refreshing for every click so that eventually blank ads can occur as the system is unable to keep up with the user clicks.
Hence I'd like to only call refresh only if the ad has completely finished loading.
Is there any way of detecting the loaded state of an ad within a slot?
Our ads are defined using:
slot_header_lge = googletag.defineSlot('/XXX/Header-Home-Large', [945, 230], 'div-gpt-ad-Header-Large').addService(googletag.pubads());
googletag.pubads().enableAsyncRendering();
googletag.pubads().collapseEmptyDivs();
googletag.enableServices();
I made a jquery plugin that wraps DFP and kind of came up with a solution to this problem a while back... there is an internal function on the ad unit called renderEnded() that you can hook into to check when the ad unit has been rendered.
In my experience this just means that the HTML code has been put into the page... and not necessarily that the ad has completely finished loading. You could combine some timeOuts with this to get a fairly robust system going though.
For example with my plugin you can try the following, it shouldn't allow ads to be refreshed until 5 seconds after the last ad on the page has rendered:
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://coop182.github.io/jquery.dfp.js/jquery.dfp.js"></script>
</head>
<body>
Test DFP Ads.
<div class="adunit" id="buyingcars_ATF_728x90" data-dimensions="728x90"></div>
<script>
var adsLoaded = true;
function checkLoading() {
console.log('Checking...');
if (adsLoaded) {
loadAds();
}
}
function loadAds() {
console.log('Loading...');
adsLoaded = false;
$.dfp({
dfpID: '3853655',
afterAllAdsLoaded: function() {
setTimeout(function(){adsLoaded = true;}, 5000);
}
});
}
checkLoading();
</script>
Refresh
</body>
</html>

Categories