setInterval stopped when navigate to next page - javascript

I added setInterval method for downloading one of data. But the intervel is cleared when navigated to next page? is the functionality is correct?
Regards,George

Javascript variables (and setInterval generate a reference that you can save in a variable) are scoped by page.
Which means that when you are changing page, you make another request that reset your state.
Available solutions are the following :
Avoid reloading the page and use AJAX to refresh your page, if you app is mostly rely on async data I suggests you using some frontend framework to make Single Page Application like React, Vuejs, Angular.
You can also persist in localstorage or IndexedDB some data that can be given to a script that will run after page loading and create your interval.
You might also take a look at https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

Related

How do I save the markup change I made, when going from one page to the next?

So heres the thing. I have the following:
I am making a website and each site has the same nav-bar, where you are to login. So, I made a universal navbar.php that I include in all my pages. I also made the functionality when you login, over this navbar an ajax call is sent to retreive the correct user and the markup of the navbar is changed. But when I go to other pages the navbar resets to it's initial state. How do I keep this nav-bar state when moving from page to page. Also, when I press refresh it resets.
I was thinking when I login, initially to set a global variable in my javascript file, but that doesn't seem to work since, it looks like with every page reload, it's as if the javascript is also reloaded from the beginning. How is this normally done?
LocalStorage is analogous to client session-storage in your case.
You can save your data into Local-storage or session storage (angular js)
amplify

Node.js event when Facebook page posts

I'm using Node.js to build a site which involves getting posts from a public Facebook page.
I currently have the server updating my sqlite3 database from Facebook every n hours which works fine but I was wondering if there is some way I can set up an event which calls the update function whenever the page makes a post?
This would mean the site was always up to date with the page and there wouldn't be the delay of waiting until the next update time
You can use Webhooks: https://developers.facebook.com/docs/graph-api/webhooks
...those can only be used if you manage the Page though, there is no way to subscribe to changes to a Page you don't own.

Persist data in same window even if url changes

I have graph with data in welcome page like widget(/welcome). when the user clicks the graph the page change to /home/default and the same graph should be displayed along with some extra data which is populated by Ajax call. What I want is to persist the graph data from /welcome into /home/default page. I don't want the data to go controller and back to the /home/default page. Kindly suggest.
In a nutshell, you need to set some state for the user and then when the /home/default page is rendered, you need to check that state and make corresponding changes to the presentation of the page.
This can be done either server-side (in the rendering of the page) or client-side (via Javascript adding things to the page).
If you do this client-side, then the state can be stored in a cookie, in LocalStorage or in a query parameter in the URL when you redirect. Then, you place Javascript code into /home/default that checks that state and adds content to the page dynamically based on the state.
If you do this server-side, then the state can be stored in a cookie or in some server-side data store and then when the /hoome/default page is rendered, your server side page rendering process can check the state for this particular user and modify the rendering of the page to include the desired content.
You have a plethora of options. The best solution depends on how your application is currently implemented -- whether in a framework or not, with sessions or not, etc. The principle whatever method you choose is almost identical: store a value and then retrieve it later.
Single Page Application (SPA)
If you aren't already using a framework, I would urge you to consider migrating to one as tasks like these are made infinitely more elegant in their implementation.
Service / Data Store
If you are building an SPA then you may not have to consider any of the options below... so long as it doesn't matter if the data is lost if the user performs a 'real' navigation that cannot be intercepted by the framework (for example, refreshing the page).
In Angular you can maintain a temporary data store in the form of a service. Simply store the data and then pick it up later from another controller. Similar functionality can be achieved in all other popular SPA frameworks:
Angular
Ember
React
Local Storage
Local Storage is available in IE8 and above and has a really simple API.
Angular: angular-local-storage
React: react-local-storage
Ember: ember-local-storage-adapter
jQuery: jStorage
IndexedDB
If you're into the cutting edge and aren't tied down by browser support, consider using IndexedDB. I don't recommend using this unless you are wanting to persist large amounts of data remotely on the client's machine. (It really does have bad support at the moment.)
Angular: angular-indexed-db
React: ???
Ember: ember-indexeddb-adapter
jQuery: jquery-indexeddb
Cookies
If your application is inflexible then cookies will be the easiest and least time-consuming. However Local Storage may be a contender.
Angular: $cookie service
React: react-cookie
Ember: ???
jQuery: jquery-cookie

Asynchronous call in HTML5?

How to make an asynchronous call in html5 apps .Suppose if i make a async call to get data from server and waiting for response.Meanwhile if i refresh the browser,i will not be able to catch the data b'coz page is reloaded with all variable redefined.so how to get those data even though user refresh the browser or navigate to other page.
Whatever variables are getting redefined, you can store in a temporary session. You can either store the data locally with local storage, store it in javascript with cookies, or store the data server-side and reference it with a cookie session.
At that point, you can just have your code realize it needs to download the data and do that as soon as the page gets refreshed.
Alternatively, you can make it so a confirmation prompt comes up on refresh mentioning their data may be lost.
There is no direct way to implement this. You can try Ajax History, when you refresh the page, a new ajax call will be made.
or try http://ajaxpatterns.org/Unique_URLs
I do not believe that this is possible. Once the user refreshes the browser, then any existing calls will act as though they have been cut off.
You COULD try to write logic such that on every browser refresh you check the server for lost calls, but this will get quite complicated.
Most users tend to know that when they browse away from a page, any existing requests will be lost, though.

how to update a Django page without a page reload?

My Django app displays data from a database. This data changes without user intervention, i.e. behind the scenes. Whenever it changes, I would like the webpage to update the changed sections without a full page reload.
Obviously AJAX springs to mind. When the page is loaded initially (or manually, fully re-loaded later on), the rendered template loads a JavaScript that runs window.onload = update("all"), update(...) in turn triggers a number of XMLHTTPRequests which again return data that gets transformed into HTML pieces for the corresponding sections. All works fine. At the initial page load.
Now I find myself in a Python function that saves a new object to the database.
How do I tell the browser to run update(...) ?
Do I need to somehow manually issue a request to a url that is mapped to a view which in turn renders a template that contains the JavaScript code to run update(...) ??? Oh my!
I feel like I'm not following the usual approaches.
Maybe I'm just standing to close in front of the problem.
Can anyone help me ?
2021 update: Use channels: https://channels.readthedocs.io/en/latest/
You have two choices
Have the browser poll using setTimeout()
Look into Comet -- this is a technique for pushing data from the server to the browser.
Here's an article on Comet in Django
two approaches:
just update the database and wait until the next AJAX query. That means it should do the query periodically, you'll have to balance between immediacy and server load. It helps a little if you can do a cheap query to just verify if there has been an update. Maybe make that check rely only on memcached instead of going to the DB
use comet. In short: the client does an AJAX query asking for the update. the server sees there's no update, so it doesn't answer. Instead, the connection is kept open for a long time. Eventually either the update comes and the server finally answers, or the client times out and kill the connection. In that case, the client should immediately reissue the query to keep waiting for the update.
You can also use The Websocket API https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.

Categories