[Express + EJS Template] Reload part of HTML rendered page with new elements

[J0hn3ch]

Hi everyone,

I'm new in web development with Node.js, and I would like to know what is the best way to reload part of rendered HTML page, when I retrieve other information from a database (e.g when perform a fetch with a GET request to retrieve a JSON list of object to visualize in a table).

Are there some best practices in Express or in EJS to handle this kind of behavior?

Thanks in advance!

[Harshit-Maurya838]

In order to resolve this issue, update only a part of the webpage without reloading the whole, use AJAX techniques with Fetch API or Axios. You will get the data from your server and update just one portion of your HTML, such as a table, while all the rest remains unchanged on your page.

[J0hn3ch]

In order to resolve this issue, update only a part of the webpage without reloading the whole, use AJAX techniques with Fetch API or Axios. You will get the data from your server and update just one portion of your HTML, such as a table, while all the rest remains unchanged on your page.

Do you have any suggestions on how to structure the JavaScript code for the client-side inside the project folders? Are there some best practices on that?

[HuspAD]

Hi! As @Harshit-Maurya838 writes, you should use AJAX request to send a get request to the server and the server should respond by sending rendered EJS template, then you need your code to swap an existing element with the new one sent by the server. I can highly recommend HTMX library for this as it makes these AJAX requests as simple as writing one or two HTML attributes. Look up "Net Ninja" on Youtube for nice step by step tutorials on it.