CODEWITHSUNDEEP
javascriptnode.jsexpressmongoosecrud
Azrail
Azrail

Reputation: 11

How to add a button with an Update function using Node and Mongoose

I have created a mongoose db with events, each event is inside a bootstrap card. I am trying to figure out a way how can I redirect admin to a page where he can update the event-card and saved to my mongoose db.

The issue I have is that I already have a form for that card with a delete action and I need to be able to have another one. What I thought is to add a link which will redirect to an update_page.ejs where admin will can make changes to the form of that event and save them.

Code for admin.ejs page

<% events.forEach( function (event) { %>
      <form class="form-events" action="/delete" method="post">

        <div class="card col-lg-3" style="width: 18rem;">

          <img class="card-img-top">
          <div class="card-body">

            <h5 class="card-title"><%= event.title %></h5>
            <p class="card-text"><%= event.description %></p>
            <p class="card-text"><%= event.date %> </p>
            <p class="card-text"><%= event.capacity %></p>

            <a href="/create_event" class="btn btn-primary">Update</a>
            <button name="deleteBtn" value="<%=event._id%>" type="submit" class="btn btn-danger">Delete</button>
          </div>
        </div>

        <% }); %>
      </form>

admin.ejs

Currently the update button redirects here:

create_event.ejs

where is basically a creation of an event.

A simple solution I thought is just to add another button near the create page like update. So my first problem is that how can I after redirecting from my admin.ejs to create_page.ejs have the from completed by the event pressed otherwise the form contents will be empty, and which app.() method I must use ( POST, PATCH ) and finally is it even possible to add 2 actions to one form?

app.js code

//Create new event route.
app.post("/create_event", function (req, res) {

  const event = new Event({
    title: req.body.ev_title,
    description: req.body.ev_desc,
    date: req.body.ev_date,
    capacity: req.body.ev_cap,
  });

  event.save(function (err) {
    if (err) {
      console.log(err);
    } else {
      res.redirect("/admin");
    }
  });
});

// Delete an event
app.post("/delete", function (req, res) {

  const deletedItemId = req.body.deleteBtn;

  Event.findByIdAndDelete(deletedItemId, function (err) {
    if (!err) {
      console.log("Successfully deleted");
      res.redirect("/admin");
    } else {
      console.log(err);
    }
  });
});

P.S my solution for the DELETE route is correct? I am sorry for all the specifics, but I am totally new to this and have this project deadline coming up googled all this method but the docs seemed a bit too technical right now for me.

Upvotes: 0

Views: 608

Answers (1)

Om Prakash
Om Prakash

Reputation: 66

You can simply add a another route to node application like 

// Update an event.
app.post("/update/:id", function (req, res) {
  const _id = req.params.id;
  const event = new Event({
    title: req.body.ev_title,
    description: req.body.ev_desc,
    date: req.body.ev_date,
    capacity: req.body.ev_cap,
  });

  event.findOne({ _id }, '_id title description date capacity', function (err, data) {
    if (err) {
      console.log(err);
    } else {
      res.render('path to create_data.ejs', { event : data });
    }
  });
});

In the create_data.ejs file, fill all the form elements with value of the event like value="<%= event.title %>".

Note : If you're making above changes in create_data.ejs file, make sure to pass a blank event property in the create_event route as well like

// Create an event.
app.post("/create", function (req, res) {
  res.render('path to create_data.ejs', { event : {});
});

Now,
Add a condition on create button in create_event.ejs file like

<% if(_event.id){ %>
... Update button to save the updated event
<% }else{ %>
... Create button to create a new event
<% } %>

Finally, In your admin.ejs file change 

<a href="/create_event" class="btn btn-primary">Update</a>

to

<a href="/update/<%=event._id%>" class="btn btn-primary">Update</a>

Hope this answers your question.

Upvotes: 1

Related Questions