Maintaining the functionality of an AJAX web page even after extended periods of inactivity

When using my one-page web app, I sometimes leave the page open overnight and find that when I come back in the morning, things don't work as they should. It seems like Javascript is acting up - edit-in-place loads incorrect data, ajax calls fail to fire... It doesn't seem to be an issue with the backend, but rather the browser possibly dumping its memory. There are no sessions involved.

I'm curious how Google calendar manages to stay open for 3 days and still send event alerts.

Even though I have a 'keep alive' call that runs every 5 seconds to keep the browser active, it doesn't seem to resolve the issue. Is there a way to instruct the browser to store everything in memory indefinitely?

(I'm aware that this topic might be discussed in various places on the internet, but I'm not sure what exactly to search for.)

javascriptajaxkeep-alive

Answer №1

Considerations to keep in mind:

  • Try testing your code on multiple browsers to determine if the issue persists across all platforms.
    • If the problem is present on all browsers, the issue likely lies within your code.
    • If the problem is only occurring on one browser, it could be related to that specific browser or an interaction with a particular section of your code.
  • While seemingly insignificant, remember to properly manage memory in JavaScript by deleting and freeing any allocated resources.
  • For any third-party libraries used, consider updating them or seeking help on their forums for potential solutions.

Best of luck!

Answer №2

Is there a need for re-authentication when refreshing the page due to session timeout or any other reason? If simply hitting F5 allows you to continue, I recommend implementing an 'idle' timer in your application that triggers a window.reload() every hour when there is no user interaction (and reset the timer with each interaction).

I hope this suggestion proves useful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for customizing the main select all checkbox in Material-UI React data grid

Utilizing a data grid with multiple selection in Material UI React, I have styled the headings with a dark background color and light text color. To maintain consistency, I also want to apply the same styling to the select all checkbox at the top. Althou ...

javascriptreactjstypescriptmaterial-uidatagrid

Leveraging ternary operators within HTML elements

Currently, I am utilizing the Vue.js framework to create a dynamic list that updates based on two different list objects. My main objective is to adjust the border of the list cards depending on a specific condition. Below are the defined cards: <li ...

javascripthtmlvue.jsconditional-operator

Retrieving information from React elements

Recently, I ventured into the world of React and started building a mock website for online food ordering. One of my components is called Items, which utilizes props to display all the food items on the webpage. import { useState } from "react"; ...

javascriptreactjs

HTML TABS: Make the first TAB automatically selected

I've been experimenting with tabbing in HTML using a tutorial I found on W3SCHOOLS. While the source code provided works fine, I'm encountering an issue with automatically selecting the first tab by default. The tutorial doesn't cover this, ...

javascriptcsshtml

Display a dropdown menu when hovering over with a delay

I recently created a basic navigation menu with dropdown functionality using CSS3 initially, but I decided to enhance it by incorporating jQuery to display the dropdown after a set timeframe. However, I am facing an issue where all dropdowns appear when ho ...

javascriptjquerydrop-down-menunavigationtimeout

Learn how to send or submit data using the Form.io form builder

I am currently working on a dynamic drag and drop form builder, and I'm struggling to figure out how to log the data from the form. Below is the component.html file where I am implementing the drag and drop form: <div> <form-builder ...

javascriptangularforms

Having issues with transferring user input on change to a parent component in React JavaScript

I encountered an issue while passing a method from a parent component to a child component. The parent component, FilterableProductTable, contains a state called filterText. It renders a child component named SearchBar and passes down a function called han ...

javascriptreactjsjsx

When the page is dynamically loaded, Ng-repeat does not function as expected

I am working on a page that includes the following code snippet: <script> angular.module('myapp', []).controller('categoryCtrl', function($scope) { $scope.category = <? echo json_encode($myarr); ?>; $scope.subcatego ...

javascriptangularjsangularjs-ng-repeat

Is there a way for me to send a form containing pre-existing data from a different page?

Seeking advice: I realize that utilizing jQuery's ajax function may be the simplest approach, however I am facing an issue with the form field names. The var_dump below displays the typical values submitted by the form using test data. It appears that ...

javascriptphphtmlforms

Is it better to write to a shared text file or a database table from a web service?

As I work on a web service that will be triggered by client-side JSON every time a drop-down selection changes, the aim is to capture each "intermediate" change using the "OnSelectedIndexChanged" event before sending the form to the server. Each new selec ...

ajaxweb-servicesjson

Ways to organize the information within the Ul and Li elements

I need help sorting the data within <ul> and <li> elements using jQuery. Below is a snippet of my code: <ul id="rootUl"> <li> <div id='title'>MSFT</div> <div id='price'>230</d ...

javascriptjquerysorting

Tips for transferring a value from a Next.js route to a physical component

So, I encountered some issues while creating a Next.js project related to the database. To solve this problem, I connected to Vercel's hosted database. After successfully inserting and selecting data into the database using routes, I wanted to enhance ...

javascriptreactjsnext.jslocal-storage

Suggestions for updating the 'begin' and 'finish' variables transmitted through ajax on fullcalendar?

Shown below is the URL to request JSON data via Ajax: '/php/get-events.php?start=2015-05-31&end=2015-06-07&_=1433154089490'. This query will fetch JSON data from 2015-05-31 to 2015-06-07. However, I am looking to retrieve data over a ...

javascriptphpajaxjsonfullcalendar

Error encountered when attempting to convert a JSON object to a String using JSON.stringify(), due to a cyclic object value

I have a JSON object with the following structure: obj { name: "abc" , entriesList : "list of entry obj" , propertiesList : "list of properties obj" }; In this structure, an entry is also another object entry { info : "data obj" , ...

javascriptjqueryjson

Is there a way to modify the color scheme of the hamburger icon

I'm experiencing difficulties changing the color of a hamburger icon. I've searched for the specific code responsible for the color change, but I haven't been able to locate it. Ideally, I want the color to be white, but on small screens, i ...

javascriptphphtmlcss

How can I display the output from Geocoder in a text box using the ArcGIS JavaScript API?

I am trying to customize the Geocoder text box in the ArcGIS JavaScript API by overriding the default search result. Although I have written some code for this purpose, I am not satisfied with the results. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

javascriptjqueryhtmldojoarcgis-js-api

Optimizing your approach to testing deferred always

When creating test cases for code within a jQuery AJAX call's always method or in bluebird promises' finally function, it often involves the following structure: function doStuff() { console.log('stuff done'); } function someFunct ...

javascriptjquerypromisequnit

Express.js never terminates a session

I have a Backbone View that makes an Ajax call to the server to delete a session. Upon triggering the following event on the server: app.delete('/session', function(req, res) { if (req.session) { req.session.destroy(function() { ...

javascriptnode.jssessionexpress

What is the best way to submit a form using ajax in PHP?

I'm experiencing an issue with my ajax form submission. I have set up a jquery alert to display when the submission is successful, but it is not showing up. I suspect that the submission is unsuccessful. Can anyone help me figure out why? Here is the ...

ajaxformsajaxform

Utilizing React Native for seamless deep linking with automatic fallback to a webpage, including the ability to pass

I am currently working on a project that involves a website built with React and a React-native app for camera functionality and data processing. On the website, there is a button that opens the camera in the React-native app through deep-linking. This pa ...

javascriptandroidreactjsreact-nativedeep-linking