Update changes simultaneously while navigating away using AJAX onreadystatechange

When a user clicks on a link, I want to initiate an AJAX request to save the current page's content and navigate away simultaneously.

Typically, when the window is attempting to navigate away, all AJAX requests are interrupted prematurely. This could mean that the server hasn't finished processing the request. If the AJAX call is aborted too soon, any changes made will not be saved.

The valid readystates according to W3Schools

1: server connection established
2: request received
3: request processing
4: request completed and response ready

Should I wait for state 2 or 3 to ensure the request goes through on major browsers before navigating away?

I understand the risk of not confirming a successful save in state 4, which means the user may not be aware of any failure in saving changes. However, considering the stable code, once the server acknowledges the request, it's highly likely that if the changes aren't saved, the user won't have any recourse anyway (like a deleted or locked post). Plus, the changes might not be crucial.

The main concern is handling Internet Connection Failures - at least being informed about them in major browsers.

Do I need to wait until state 4 to detect such failures?

If we ignore connection failures entirely, which state should I wait for?

Answer №1

Yes, it is advisable to wait for 4 and review the response. You can include a success indicator in your server's POST / GET request and then update the window.location accordingly. Remember to use preventDefault when using a link to initiate your ajax call.

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

Obtaining legitimate CSS property names for React dynamically

I am looking to create a dropdown menu in React that allows users to select camelized CSS properties (such as width, color, textAlign) for inline styles. Instead of manually inputting all the options for the dropdown, I had the idea of using the React.CSS ...

Encountering an unknown parse error while working with Typescript, Vue, vue-property-decorator, and VSCode

I am brand new to Typescript and Vue.js, and I haven't been able to find a solution here. The code below is causing a parsing error: '}' expected I have double-checked all the bracket pairs and as far as my eye can see, everything looks co ...

Struggles with fading in and out

I'm currently working on enhancing a pure CSS rollover with a smooth transition/fade effect, but I'm encountering some difficulties in achieving the desired outcome. The concept involves displaying a new div called "online-hover" when hovering o ...

Retrieving the initial data from a fetched JSON file in React

I'm struggling to extract the data from the initial object in a JSON document. const apiUrl = 'https://uniqueapi.com/data.json?limit=1'; function App() { const [items, setItems] = useState([]); useEffect(() => { async functio ...

What is the best way to retrieve a previously used jQuery function?

The dynamic table I've created has the functionality to search, display search results in pagination, and auto-compute fields. This is how it works: Users search for their items in the search box If the search results are extensive, the system displ ...

Can Threejs enable us to assign unique colors to each face of a cube?

// In this code snippet, we are loading a mesh and adding it to the scene. var loader = new THREE.JSONLoader(); loader.load( "models/cubic.js", function(geometry){ var material = new THREE.MeshLambertMaterial({color: 0x55B66 ...

Generating numerous assorted arrays to serve as components of a larger array

Imagine this scenario: var container = [] My objective is to create multiple (exactly 289) arrays as elements within the main one. Each of these arrays should resemble the following structure: var item = {x:"A", y:"B", terrain:"C", note:"D"} Generating ...

What is causing Bxslider to malfunction?

I need help troubleshooting an issue with my HTML code. The slideshow I'm trying to create isn't working as expected; all images are displaying vertically and I'm getting an error message saying that bxslider() is not a function. Can anyone ...

Executing a Javascript button click in Selenium without an ID using Java

Currently, I am in the process of setting up a Java program integrated with Selenium automation tool. Upon the initiation of the program, a Chrome extension that is crucial for its functionality loads alongside the Chrome browser instance. Following this ...

Identical HTML elements appearing across multiple DOM pages

My question might seem silly, but I'm facing an issue. I have several HTML pages such as index.html and rooms.html, along with a main.js file containing scripts for all of these pages. The problem arises because I have variables like const HTMLelemen ...

Obtain information from Firebase and display it in a list

I've been struggling to retrieve my to-do tasks from a firebase database, but unfortunately, no data is appearing on my view. Surprisingly, there are no errors showing up in the console. My journey led me to the point of "saving data" in firebase. H ...

NodeJS: The module failed to automatically register itself

Exploring the capabilities of IBM Watson's Speech to Text API, I encountered an issue while running my NodeJS application. To handle the input audio data and utilize IBM Watson's SpeechToText package, I integrated the line-in package for streami ...

Having trouble with the "Ajax is not defined" error while using Symfony 1.4 in conjunction with the sfProtoc

I've been grappling with this issue for a few days now. Can someone more knowledgeable than me please review and point out where I'm going wrong? This has been developed in symfony 1.4, using sfProtoculousPlugin for input_auto_complete_tag. Her ...

Removing background color and opacity with JavaScript

Is there a way to eliminate the background-color and opacity attributes using JavaScript exclusively (without relying on jQuery)? I attempted the following: document.getElementById('darkOverlay').style.removeProperty("background-color"); docume ...

Display a loading animation before the page loads upon clicking

$("#button").click(function(){ $(document).ready(function() { $('#wrapper').load('page.php'); }); }); <div id="wrapper"></div> <div id="button">click me</div> I would like to display a loading ic ...

Using Node.js to integrate Stripe payment method

After successfully implementing a stripe payment method with node and express, I encountered some issues. Although the payment runs smoothly and returns a success message, the customer is not being added to the list of stripe customers. Additionally, my no ...

Tips for utilizing loops in Node.js to store form data as objects and arrays of objects in MongoDB

Having recently started working with MongoDB, I am incorporating Node.js, Express 4, and mongoose (mongoDB) into my project. I am facing an issue when trying to save form data to mongoDB within a loop, especially because my model contains both objects and ...

How can one define a function type in typescript that includes varying or extra parameters?

// define callbacks const checkValue = (key: string, value: unknown) => { if (typeof value !== 'number' || Number.isNaN(value)) throw new Error('error ' + key) return value } const checkRange = (key: string, value: unknown, ...

Having trouble retrieving JSON data from a local file using AJAX and jQuery

I am currently facing an issue with passing the content of json.txt in my PHP project folder to JavaScript. It was working fine yesterday, but today it seems that the browser is preventing it somehow... EDIT : Just to clarify, everything is on localhost, ...

Server elements fail to refresh following the use of JQuery AjaxUpload

I have been using JQuery AjaxUpload to upload an image and then attempt to update the image control with the freshly uploaded image. However, my code is not functioning as expected and I am unable to set ViewState. I would like to figure out why this is ha ...