2

I have a EJS template which takes a file userData from the server.

How can I implement the refresh of userData in the template without reloading the page?

I have managed to submit data to the server without reloading the page by Ajax post methods, in other parts of the app.
But can not find an approach to render updated data in the template without reloading the page.

EJS template
It is rendered when browser get to URL /tasks

This snippet is only a part of the app to demonstrate the structure.

    <%userData.forEach(function(project){%>
<div class="project">
  <div class="projectHeader">
    <div class="projectTitle">
      <span>
        <a data-toggle="modal" data-target="#editDeadLineModal">
          <i id="setListDeadline" data-id="<%=project.id%>" class="far fa-calendar-alt fa-2x" data-toggle="tooltip" data-placement="top" title="Set Deadline"></i>
        </a>
      </span>
      <%if(project.deadline == null){%>
      <h5 class="projectName"><%=project.name%></h5>
      <%}else{%>
      <% var deadline = project.deadline.toDateString()%>
      <h5 data-toggle="tooltip" data-placement="top" title="Deadline <%=deadline%>" style="align-items: center;" class="projectName">
        <%=project.name%>
      </h5>
      <%}%>
   </div>
  </div>
 </div>

I use forEach loop to grab every single project in the file and render it in <div class="project">, so the page get populated with as many objects it is in the userData.

  • userData contains:

    • project.id
    • project.name
    • project.deadline

For example I have changed the project.name and submitted through Ajax post method new data to the server.

I know that it is saved - as it is logged "New data saved" after query execution.

Here is my GET method.

Once URL is reached query the DB for all projects and send them to the template.

app.get("/tasks",  async (req, res) => {
  const results = await pool.query(`SELECT * FROM projects`);

  res.render("tasks", {
    userData: results,
  })
})
PanchoChi
  • 37
  • 1
  • 9
  • 1
    You want Server to send a message Client browser, like I real-time live apps, like chat for example, that requires web socket or http pooling from server to client, check socket.io for examples and docs – Medet Tleukabiluly Sep 26 '20 at 13:06
  • @MedetTleukabiluly thank you for a hint (Looking for this option now), but is technically possible to implement refresh of ejs template without reloading, only with Ajax or Jquery in this particular case? – PanchoChi Sep 26 '20 at 13:15
  • Browser doesn’t know when to update, that’s the problem – Medet Tleukabiluly Sep 26 '20 at 13:16
  • As I understand - `$(".project").on('click', function() { refresh page code }` is not the case of updating. Is it? – PanchoChi Sep 26 '20 at 13:18
  • Since you already do an ajax request to update the data, you can just do another ajax call on success eg `$.post("update", data).done(function() { $.get("tasks").done(function(data) { render data }) })`. You can improve the readability using async/await or defining the get function separately – Yohanes Gultom Sep 27 '20 at 08:02
  • @YohanesGultom thank you for an idea, but could you please give a little more extended post request description? – PanchoChi Sep 27 '20 at 08:25
  • oh I was assuming that you use jquery [$.post()](https://api.jquery.com/jquery.post/) method to "submit data to the server without reloading the page by Ajax post methods" as you've mentioned above – Yohanes Gultom Sep 27 '20 at 08:31
  • @YohanesGultom yes, I do use Post method to submit data. Did you mean that on success of Post request - I can call a get method to `/tasks` to update data in Template without reloading page? – PanchoChi Sep 27 '20 at 08:40
  • Yes, precisely. The `/tasks` method should return html. You just need to parse it (eg. get the `project` divs and replace the data in the current page. Furthermore you can create a new api similar to `/tasks` (`/api/tasks` maybe?) but returns json so you don't need to parse a html response – Yohanes Gultom Sep 27 '20 at 09:29
  • Check this answer: https://stackoverflow.com/questions/50378874/render-ejs-node-js/50389167#50389167 – mahmouds12 Jan 18 '22 at 07:33

0 Answers0