Keep timer (setInterval) running while reloading page - javascript

Once I load a webpage, I insert some Javscript via the console. I was wondering if it's possible for me to, using either Javascript or jQuery, reload the page (not from cache) while keeping a setInterval that I have running. I'm familiar with location.reload(), but that terminates it.

When you reload a page, the entire page context including all running JS is completely destroyed. You cannot keep a setInterval() running while its host page is reloaded.
You can create a signal for the new page to start the interval going again itself using a cookie, query parameter or local storage value (query parameter is probably the most appropriate). If you go this way, then you need to code the page to look for a specific query parameter and if it finds it, then the page should start the designated setInterval() itself. You can even pass some data in the query parameter (such as how much more time until the next interval should fire, etc...).
Another option is to not actually reload the page, but instead to refresh the content manually by getting new content via an ajax call and then inserting it into the current page. This allowed the current page context and running interval timers to continue running.

Not possible unless you fetch the page using Ajax request, then replace the body while the setInterval Is working

Related

PHP MySQL : How to make an auto refresh data only when data changed on database

Usually I make content refresh automatically with the javascript function using setInterval.
But it seems ineffective because every second the content must be reloaded will take up a lot of resources.
Therefore if there is another alternative to creating an automatic refresh function only when the data has changed in the database.
One way to update your data would be to use Ajax in the frontend to request the data every few seconds and update it instead of reloading the page. Otherwise, you should check out socket.io (websockets)

How to detect when a tab is restored after it has been closed?

I'm having issues with JS state after the state has been changed but reverts back to the state it was loaded in when the user closes the tab and restores it using cmd/ctrl + shift + t.
Normally when the pages are loaded using Vue's mounted() lifecycle hook, data is fetched from the server through the API using ajax. However, when the tab is restored, it loads the data as it was when it was first loaded the first time.
This is by design, Ctrl-Shift-T acts just like Ctrl-Tab, it switches the tab but it does not reinitialize its contents.
You can mimick your needed behaviour by the following sequence:
1) Server-side assign every request a random, unique ID available in JS
2) On unload (or beforeunload, experiment here), add the ID to an array cookie of unloaded IDs
3) On load, check if the ID is in the array cookie. If it is, then the tabbed was unloaded before load. load seems to trigger on Ctrl-Shift-T
4) Don't forget to purge the cookie id array every now and then (maybe also store add time).
You may experiment with using window.sessionStorage instead of cookies/local storage, I don't trust it enough as I haven't used it. The principle is the same, to mark down somewhere when the window is unloaded, then check in onload.
Might also work for you:
1) On load, use window.history to add a slug to the url, such as #dorefresh. Then, on the subsequent load, check if the slug exists and trigger refresh.
OR
2) Add a timestamp on page generation (make it UTC to be sure you don't run into timezone issues). Then on load check if the page load time is too much into the future of generation time. This is vulnerable to time errors, also don't use if your page is cacheable.
OR
3) For stale AJAX requests: maybe adding a no-store header (to the AJAX response only, not the main page) might prevent the browser storing a cached copy.

Javascript page call function

I have javascript page that calling another page.
when the second page is called, I send request data to sql server to see how many
time the second page is called.
But always see that just once.
I've added dynamic querystring to prevent cache from browser
this is my code:
for(i=1;i<=30;i++)
{
var q="eeee?id=" + i;
window.location=q;
}
But alwayes see these 2 records in database instead of 31 records:
javacall ==> first page that has java call function
eeee?id=30
why page is called in 30th call and not from 1 to 30, for example:
javacall
eeee?id=1
.
.
.
eeee?id=30
The browser doesn't check to see if location has changed until the JavaScript has stopped running (it is too busy running the JavaScript until then).
When the loop gets to the end, it will be set to the last value. At the point, the browser registers that it has changed and loads the new URL.
If that wasn't the case, then the first change to it would cause the browser to leave the current pageā€¦ which will destroy the execution environment the script was running it, abort the script and cause the subsequent URLs to not be requested.
If you want to make multiple HTTP requests from JavaScript, then use Ajax. You'd normally do this through the XMLHttpRequest object.

How to run a javascript function when ANY page is loaded

I am doing some maintenance work to a fairly large existing site written in PHP & JavaScript. I am trying to set up a "time out" so that the user is automatically logged out after a specified period of time. I think I have the code that will "expire" the users session, but what I need is a way to run a specific javascript function whenever ANY of the pages in the existing system are loaded. I'd rather not manually add a call in each page as this would take forever and would require even more testing.
Is there a way to add a javascript function call to the window or some other part of the DOM to get called whenever a page is loaded?
Thanks for any help!
There are many ways to achieve this. BUT, you will have to first include a reference to the javascript file.
Then, you can, for instance, use jQuery to detect that the DOM is loaded and ready to call a function of yours.
On a side note, can I ask you why you need to call a javascript function? There are probably other ways to do that, like a listener on your server that redirects to a logout page when a session expires.
Write the javascript in a .js file, host it on your server, and link to the .js from all the pages. While this does not apply a global rule, it is the only way I can think of and it won't be a problem for testing as the code will be from one source.
No.
You have to have the javascript function load into every page. But you just have to write it once and then include like:
<script src="logout.js"></script>
and then you'll need to set the timer for the logout
<body onload="setLogoutTimer()">
But in order for every page to have it you either need to explicitly place it in every page.
That depends to your site script. If you're checking your session data on every request this could be done easily.
Add time data for a session's last move, append it to a js script which controls that If it's time to end the session or not. And take action(js redirect or an ajax request)

Wait message for slow JSF page

I have a jsf page having a request scope bean. A slow database query is fired in the constructor of the request scope bean. Then, the results of the query are shown in a jsf data table on the web page.
How do I display a wait message until the database query completes?
I tried calling a javascript function for onLoad of tag. The method is called only after the slow db query executes.
The slow database query is happening on the server, long before the constructed page ever makes it out to the browser. The only way to do what you want is to arrange for the browser to display the "Wait" message before you initiate the HTTP request that results in your JSF page being run.
Probably the best way to spend your time on this, however, is to fix the query.
You must load the "wait page" first and then, in the onLoad of that page, load the one which does the DB query. If the query is fast, the user won't see much flickering because modern browsers (= anything but IE6).
Alternatively, you can load the result in a hidden iframe and show a "please wait" in the page. When the code in the iframe has loaded, you can make it visible by accessing the parent document with parent:
parent.getElementById('frame').styles.display = '';
parent.getElementById('wait').styles.display = 'none';
(put this in the onLoad of the JSP which is inside the iframe).

Categories

Resources