I am in the process of developing a data analytics dashboard using the MEN stack (MongoDB, Express.js, Node.js). I have successfully implemented functionality to display real-time data that refreshes every 5 seconds without the need to reload the entire HTML page. However, constantly seeing the page refresh is not very pleasing to the eye. Is there a way to utilize AJAX or a similar technology to only refresh a specific DIV or section of the page? I've attempted various AJAX methods in different locations but have been unsuccessful so far. It's possible that I am approaching it incorrectly. Any suggestions?
async showTasksMain(req, res) {
const queryWeather = "SELECT * FROM c ORDER BY c.EventProcessedUtcTime desc"
const items = await this.taskDao.findweather(queryWeather); //Retrieve variables
const tempdata = await this.taskDao.findtempdata(queryWeather);
res.render("index",{items:items, tempdata:tempdata});
}
async findweather(queryWeather) {
debug("Querying for items from the database");
if (!this.container) {
throw new Error("Collection is not initialized.");
}
const { result: results } = await this.container.items
.query(queryWeather)
.toArray();
var obj = results[0];
return obj;
}
app.get("/", (req, res, next) => taskList.showTasksMain(req, res).catch(next));
<script type = "text/JavaScript">
function AutoRefresh( t ) {
setTimeout("location.reload(true);", t);
}
</script>
<body onload="JavaScript:AutoRefresh(30000)">;