NodeJS render a view from AJAX call - node.js

Question

I trying to render a view using an AJAX call:
let data = {}
data.ph_user = ph_user
data.nav_destination ='bids_review'
$.ajax({
type: 'POST',
data: JSON.stringify(data),
contentType: 'application/json',
url: '/users/navigation',
});
The router's code is:
router.post('/navigation', (req, res) => {
try {
var fname = req.body['ph_user']
var main_block = req.body['nav_destination']
if(main_block='bids_review'){
console.log(fname, main_block, 'zzzz')
res.render('bids_review', {ph_user: fname, main_block: 'dashboard'});
}
}catch(err){
console.log(err)
}
})
It looks like route is called properly but new view is not rendered. I don't get any errors on either server or client side.
I know i can do via form but would like to know if there is a way to accomplish this with AJAX call. Any guidance is greatly appreciated.

Answer 1

Your route returns rendered HTML to the AJAX call. If you want to render HTML directly from the server, do not use AJAX, just redirect to the route (i.e. use a form to post the data, or change the route to .get and redirect to the location).
To keep using AJAX, you probably want to return JSON from the route, and render it on the client.

Answer 2

I had the same problem. I did an Ajax call for modifying data. After the update the partial page had to be displayed again but now with information that the data has been updated. The code is just sample code but the important part is in the response the response.body is a stream. If you stream that to the partial (innerHTML), then your page is updated with the res.render data. Extra note: you could put that code in a separate function and then you could work with PUG with partials too :-)
// get form data, save history and post data to database
await this.serializeForm(form)
.then(data =>
this.replaceState(form.action).then( () =>
fetch(form.action, {
method: "POST",
headers: { 'x-requested-with': 'XMLHttpRequest',
"Content-Type": "application/json" },
body: JSON.stringify(data)
}).then( (response) =>
response
.body
.getReader()
.read()
.then( ({value}) => {
let html = new TextDecoder('utf-8').decode(value);
this.partialPage.innerHTML = html;
})
)));