I have a nodejs code where the user initially is in the localhost:3000/index once the code starts, the page /index has a form, once user clicks submit button he gets redirected to another page localhost:3000/process there is a POST request (in script.js file) that sends those data to server, then the POST request on the server side needs to execute a function, only once the function (which is inside the POST request is executed)then I would like the user to be redirected to another page localhost:3000/done
res.render('done') and res.redirect('/done') at the end of the post request are not working..
I have tried many things, but still not able to be redirected once the function inside the post request is executed.
the structure of my project is like this:
public folder structure:
js_folder:
script.js
routes folder:
index.js
process.js
done.js
views folder:
index.ejs
process.ejs
done.ejs
app.js file
****** ******* ******* *** ****
this how the process.js file looks like:
const express = require('express');
const router = express.Router();
/*once the user clicks on submit button (in the localhost:3000/index page) he is redirected */
router.get('/process', async (req, res) => {
// this process.ejs is showing 'please wait until function is executed'
res.render('process')
});
router.post('/process', async (req, res) => {
// getting data sent by the form
var data = req.body;
const functionOne = async function firstFunction() {
//do something
}
const secondFunction = async () => {
const update = await functionOne()
console.log('something is done');
// now I would like to redirect the user to the 'localhost:3000/done'
}
secondFunction();
});
/****** *************************** **********/
the script.js file:
function launchTerraform() {
var data = {
instances: document.getElementById('firstName').value,
region: document.getElementById('lastName').value
}
var xhr = new window.XMLHttpRequest()
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200 && this.responseText) {
}
}
xhr.open('POST', '/provision', true)
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
xhr.send(JSON.stringify(data))
window.location.href = '/process'
}
Your server function could simply send an empty response (with status 200) after the asynchronous function has completed.
router.post('/process', async (req, res) => {
var data = req.body;
const functionOne = async function firstFunction() {
//do something asynchronous with data
}
await functionOne();
res.end();
});
Then your client script could tell the user to wait before making an XHR to /process and perform the redirect to /done after the status 200 response has come in.
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
window.location.href = '/done';
}
};
document.getElementById("some_placeholder").textContent = "Please wait ...";
xhr.open('POST', '/process', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(JSON.stringify(data));
You can only send one response.
A workaround for this is using express-flash to display the "please wait" message, and then once it is done you can use your 1 response to redirect the user to the "/done" page by doing res.redirect("/done"). But that requires you use passport and cookie-parser.