I need help with a little thing. I am rendering a form in an profile.ejs page, which fields are populated by values stored in a mongo database.

Now instead of directly editing fields in that main form and resubmitting all the data to update the db, I decided to make little parts of that main form in modals, in which the data can be edited and sent to the db separately (through an express API).

So instead of editing the "weight" directly in the main form, I open a modal called subject.ejs, containing just a few parameters to edit.

Technically, subject.ejs is nested in modal.ejs which is nested in profile.ejs:

In my main page (profile.ejs):

<div  id="subjectModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <form id="modalForm" action="<%= process.env.VIRTUAL_PATH %>/api/paramsSubject" method="post">
        <div  role="document">
            <%- include('./profile/modal.ejs',{modalUrl:'subject.ejs'}) %>
        </div>
    </form>
</div>

<fieldset>
    <legend>4. Subject parameters</legend>
    <div disabled>
        <%- include('./profile/subject.ejs') %>
    </div>
    <div style="width: 100%;display: flex;justify-content: end;">
        <button type="button"  id="editSubject">Edit</button>
    </div>
</fieldset>

The pattern of the modal: (modal.ejs):

<div >     
    <div >
        <h5  id="exampleModalLabel">Modal title</h5>
        <button type="button"  data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div >
        <%- include(modalUrl) %>
    </div>
    <div >
        <button type="button"  data-dismiss="modal">Close</button>
        <button type="submit" >Save changes</button>
    </div>  
</div>

.. and in the modal, the form itself (subject.ejs) contains:

<div >
  <div >
      <label for="weight">Weight (kg)</label>
      <input type="number"  name="weight" id="weight" placeholder="Enter Weight" value="<%= params.weight %>">
  </div>
</div>

All is fine, using jquery I can POST the contents of the modal to the express API, my data is stored in the mongo db, and my profile.ejs page is reloaded. However, the profile.ejs page needs to be reloaded a second time for the updated data to appear in main form.

Here is my function sending the data :

$(`#modalForm`).submit(function(e) {
  e.preventDefault();
  const form = $(this);
  const actionUrl = form.attr(`action`);

  $.ajax({
    type: `POST`,
    url: actionUrl,
    data: form.serialize(),
    success: function(data) {
      alert(`parameters updated !`);
    }
  });
});

And my route in express:

app.post(`${virtualPath}/api/paramsSubject`, isLoggedIn, (req, res) => {
    const email = req.user.email;
    const weight = req.body.weight;

    myFunction()
    });
    // res.sendStatus(200);
    res.redirect(`${virtualPath}/profile`);
});

Is there anything I can do to replace the "res.redirect", that would bame the profile.ejs reload immediately with updated values ?

CodePudding user response：

Here it is, I got it working :

app.post(`${virtualPath}/api/paramsSubject`, isLoggedIn, (req, res) => {
    const email = req.user.email;
    const weight = req.body.weight;

    myFunction()
    })
    .then(() => {
    res.redirect(`${virtualPath}/profile`);
    });
});