Help updating blog posts in Node.js/Mongoose

Hi guys! I’m not sure which subforum to put this in. But I’m building a blog site using CRUD operations. I can create, read and delete but am having a hard time with figuring out how to update a created post. Basically I have it where I can click on the “edit” button on an individual entry in home.ejs and into the edit.ejs route where that input fields are populated with current title and content. I want to be able edit the content and title, then click “Publish” on the edit.ejs route to update the content. But when I do that, it gives me an error: Cannot POST /edit and nothing updates. What I want it to do is update an individual entry, then redirect back to the root route and have the edit reflected. Down on the “app.post(”/edit/:id")" route, am I supposed to use “PUT” request to update the post? I’m sorry if this is tough to follow. I’m not very good at explaining things. I’ve been racking my brain on this for a while. Any help is appreciated.

Here’s the relevant code:

app.js

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const mongoose = require("mongoose");
const _ = require("lodash");

const aboutContent = "Hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Non diam phasellus vestibulum lorem sed. Platea dictumst quisque sagittis purus sit. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Mauris in aliquam sem fringilla. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Amet massa vitae tortor condimentum lacinia quis vel eros. Enim ut tellus elementum sagittis vitae. Mauris ultrices eros in cursus turpis massa tincidunt dui.";
const contactContent = "Scelerisque eleifend donec pretium vulputate sapien. Rhoncus urna neque viverra justo nec ultrices. Arcu dui vivamus arcu felis bibendum. Consectetur adipiscing elit duis tristique. Risus viverra adipiscing at in tellus integer feugiat. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Consequat interdum varius sit amet mattis. Iaculis nunc sed augue lacus. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Pulvinar elementum integer enim neque. Ultrices gravida dictum fusce ut placerat orci nulla. Mauris in aliquam sem fringilla ut morbi tincidunt. Tortor posuere ac ut consequat semper viverra nam libero.";

let app = express();

app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(express.static("public"));

mongoose.connect("mongodb://localhost:27017/blogDB", {
  useNewUrlParser: true
});

const postSchema = {
  date: String,
  title: String,
  content: String
}

const Post = mongoose.model("Post", postSchema);

app.get("/", (req, res) => {

  Post.find({}, (err, posts) => {
    res.render("home", {
      posts: posts
    });
  });
});

app.get("/about", (req, res) => {
  res.render("about", {
    aboutContent: aboutContent
  });
});

app.get("/contact", (req, res) => {
  res.render("contact", {
    contactContent: contactContent
  });
});

app.get("/compose", (req, res) => {
  res.render("compose");
});


app.post("/compose", (req, res) => {
  const postTitle = req.body.postTitle;
  const postBody = req.body.postBody;

  let date = new Date();
  let postDate = date.toLocaleString('en-US');

  const post = new Post({
    date: postDate,
    title: postTitle,
    content: postBody
  });

  post.save(err => {
    if (!err) {
      res.redirect("/");
    }
  });
});

app.get("/edit/:id", (req, res) => {
  const requestedId = req.params.id;
  console.log(req.body);
  Post.findOne({
    _id: requestedId
  }, (err, post) => {
    if (!err) {
      res.render("edit", {
        title: post.title,
        content: post.content
      });
    }
  });
});

app.post("/edit/:id", (req, res) => {
  const requestedId = req.params.id;
  console.log(req.body);
  Post.findOne({
    _id: requestedId
  }, (err, post) => {
    if (!err) {
      res.render("edit", {
        title: post.title,
        content: post.content
      });
    }
  });
});



app.get("/posts/:id", (req, res) => {
  const requestedId = req.params.id;

  Post.findOne({
    _id: requestedId
  }, (err, post) => {
    if (!err) {
      res.render("post", {
        title: post.title,
        content: post.content
      });
    }
  });
});

app.post("/delete", (req, res) => {
  const deletePost = req.body.delete;

  Post.findByIdAndDelete(deletePost, (err) => {
    if (!err) {
      res.redirect("/");
    }
  });
});

app.listen(3000, function () {
  console.log("Server started on port 3000");
});

home.ejs

<%- include("partials/header") -%>
<h1>Home</h1>
<a href="/compose" class="post-link"><button type="button" class="new-entry btn btn-dark">New Entry</button></a>

<div class="entries-container">
  <% posts.forEach(post => { %>

  <div class="blog-entry">
    <p class="post-date">Posted on
      <%= post.date %>
    </p>
    <h2>
      <%= post.title %>
    </h2>
    <div class="entry-footer">
      <a href="/posts/<%= post._id %>" class="post-link"><button type="button" class="btn btn-outline-primary">VIEW</button></a>
      <form action="/edit" method="POST">
        <a href="/edit/<%= post._id %>" class="post-link" ><button type="button" name="edit" value="<%= post.title %>" class="btn btn-outline-secondary">EDIT</button></a>
      </form>
      <form action="/delete" method="POST">
        <button type="submit" name="delete" value="<%= post._id %>" class="btn btn-outline-danger">DELETE</button>
      </form>
    </div>
  </div>
  <% }) %>
</div>

<%- include("partials/footer") -%>

edit.ejs

<%- include("partials/header") -%>
<h1>Compose</h1>
<form action="/edit" method="PUT">
  <div class="form-group">
    <label for="postTitle">Title</label>
    <input type="text" name="postTitle" class="form-control" id="postTitle" autocomplete="off" value="<%= title %>">
    <label for="postBody">Post</label>
    <textarea name="postBody" class="form-control" autocomplete="off" rows="8"><%= content %></textarea>
  </div>
  <button type="submit" name="button" class="btn btn-primary">Publish</button>
</form>
<%- include("partials/footer") -%>

post.ejs

<%- include("partials/header") -%>
  <h2 class="post-title"><%= title %></h2>
  <p class="post-content"><%= content %></p>
<%- include("partials/footer") -%>

So PUT requests are not supported in HTML5 forms, they are in AJAX though. The workaround for this is to use the npm package method-override. After you add the package. Add this in your app.js

const methodOverride = require('method-override');
app.use(methodOverride('_method'));

Then in the form action attribute you need to append ?_method=PUT to the end of your route (make sure it all stays inside the quotes) and set the method to POST. So in your example it would be…

<form action="/edit?_method=PUT" method="POST">
1 Like

Thanks, but it’s still giving me a similar error: “Cannot PUT /edit.” Basically I am trying to pass the updated inputs data from “edit.ejs” route onto the existing blog’s route. So I am able to get to an existing post’s route where I can edit the title and content fields. But when I click the update button it gives me the error. Any thoughts on why that is?

Here’s the routes. Would it help if I posted a live demo too?

const express = require("express");
const bodyParser = require("body-parser");
const ejs = require("ejs");
const mongoose = require("mongoose");
const _ = require("lodash");

const aboutContent = "Hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Non diam phasellus vestibulum lorem sed. Platea dictumst quisque sagittis purus sit. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Mauris in aliquam sem fringilla. Semper risus in hendrerit gravida rutrum quisque non tellus orci. Amet massa vitae tortor condimentum lacinia quis vel eros. Enim ut tellus elementum sagittis vitae. Mauris ultrices eros in cursus turpis massa tincidunt dui.";
const contactContent = "Scelerisque eleifend donec pretium vulputate sapien. Rhoncus urna neque viverra justo nec ultrices. Arcu dui vivamus arcu felis bibendum. Consectetur adipiscing elit duis tristique. Risus viverra adipiscing at in tellus integer feugiat. Sapien nec sagittis aliquam malesuada bibendum arcu vitae. Consequat interdum varius sit amet mattis. Iaculis nunc sed augue lacus. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Pulvinar elementum integer enim neque. Ultrices gravida dictum fusce ut placerat orci nulla. Mauris in aliquam sem fringilla ut morbi tincidunt. Tortor posuere ac ut consequat semper viverra nam libero.";

let app = express();

app.set('view engine', 'ejs');

app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(express.static("public"));

mongoose.connect("mongodb://localhost:27017/blogDB", {
  useNewUrlParser: true
});

const postSchema = {
  date: String,
  title: String,
  content: String
}

const Post = mongoose.model("Post", postSchema);

app.get("/", (req, res) => {

  Post.find({}, (err, posts) => {
    res.render("home", {
      posts: posts
    });
  });
});

app.get("/about", (req, res) => {
  res.render("about", {
    aboutContent: aboutContent
  });
});

app.get("/contact", (req, res) => {
  res.render("contact", {
    contactContent: contactContent
  });
});

app.get("/compose", (req, res) => {
  res.render("compose");
});


app.post("/compose", (req, res) => {
  const postTitle = req.body.postTitle;
  const postBody = req.body.postBody;

  let date = new Date();
  let postDate = date.toLocaleString('en-US');

  const post = new Post({
    date: postDate,
    title: postTitle,
    content: postBody
  });

  post.save(err => {
    if (!err) {
      res.redirect("/");
    }
  });
});

app.get("/edit/:id", (req, res) => {
  const requestedId = req.params.id;
  console.log(req.body);
  Post.findOne({
    _id: requestedId
  }, (err, post) => {
    if (!err) {
      res.render("edit", {
        title: post.title,
        content: post.content
      });
    }
  });
});

app.post("/edit/:id", (req, res) => {
  const requestedId = req.params.id;
  console.log(req.body);
  Post.findOne({
    _id: requestedId
  }, (err, post) => {
    if (!err) {
      res.render("edit", {
        title: post.title,
        content: post.content
      });
    }
  });
});



app.get("/posts/:id", (req, res) => {
  const requestedId = req.params.id;

  Post.findOne({
    _id: requestedId
  }, (err, post) => {
    if (!err) {
      res.render("post", {
        title: post.title,
        content: post.content
      });
    }
  });
});

app.post("/delete", (req, res) => {
  const deletePost = req.body.delete;

  Post.findByIdAndDelete(deletePost, (err) => {
    if (!err) {
      res.redirect("/");
    }
  });
});

app.listen(3000, function () {
  console.log("Server started on port 3000");
});

In addition to the method-override stuff above, try this

app.put('/edit/:id', (req, res) => {
  const postEdit = {postTitle: req.body.postTitle, postBody: req.body.postBody};
  Post.findByIdAndUpdate(req.params.id, postEdit, (err, post) => {
    if(!err){
     res.render('edit');
    }
  });
});
1 Like

It’s still giving me the same error. Is there a codepen like sandbox where I can put back-end code for demo?

You can use c9.io and send an invitation to collaborate on the code. It’s free to use, but you do have to enter a credit card to setup the account. Don’t know if that’s an issue for you.

1 Like

It’s fine as long as it’s free. I’ll sign up right now and get back to you in a bit. I really appreciate you taking the time to help me out.

codeanywhere.com is another option, very similar. Haven’t used it before, but it looks the same.

1 Like

No problem, but it is 1am where I am, so I may end up passing out and getting back to you in the morning.

1 Like

That’s fine. I’ll load up all the files and you can take a look at it at your convenience. Thanks again. This really helps a lot.

OK. when you get all setup, there’s a “Share” button in the top right. Click that and at the bottom in white you can send an invitation with an email. Mine is jordant0724@gmail.com

1 Like

‘Cannot METHOD /whatever-path’ usually means that that route is missing, plain and simple :stuck_out_tongue:
Actually i can’t see it in the OP code, @JordanT0724 went closer: is not app.put('/edit/:id',...) is app.put(/edit,...) .
Of course i don’t speak of best practices or code-specific remarks, i’m just saying what the error means^^

Good luck! :smiley:

1 Like

Hey @JordanT0724,

I set up the environment but it won’t allow me to share with your email. It only allows me to share with members who have a Cloud 9 account through their username. Do you happen to have an account too? If so, can you share with me your username?

Once I share it, all you have to do is open 2 terminals and run “node app.js” on one and “./mongo” on the other.

Yeah its the same as the username here, jordant0724.

1 Like

Hmmm…it’s saying that username isn’t found. You are certain that is your username for AWS Cloud9?

Yeah sorry I started with c9.io before AWS bought them and AWS apparently only shares instances with IAM users. Try sending the invite to jordant0714

I tried that and it’s not working either. You think maybe I can just email you a zip file of my project folder? Assuming you have MongoDB installed on your local computer. Sorry for all this run around.

sure can. I don’t know why this post has to be 20 characters long.

1 Like

what is your username for aws cloud 9. I’m going to start a new environment and see if I can send you an invite. I’d love to know why this isn’t working

1 Like