Trouble updating blog app in Express and Mongoose

Hi guys! 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") -%>

Regarding the routing and http request methods, see if you can follow this example. Hopefully it’ll give you some clarity on making a document able to be updated. Forgive me, but I’ve used Handlebars here.

app.js

// Create a new blog post
app.post('/post', (req, res, next) => {
    let postTitle = req.body.title;
    let postContent = req.body.content;
    
    let post = new Post({
        date: new Date(),
        title: postTitle,
        content: postContent
    });

    post.save((err, result) => {
        if (err) {console.log(err);}
        console.log('Post Saved')
    })
    res.redirect('/');
});

// Render existing blog post for editing
app.post('/post/edit', (req, res, next) => {
    let id = req.body.id
    Post.findById(id, (err, doc) => {
        res.render('post', {post: doc});
    }); 
});

// Update the edited blog post
app.post('/post/update', (req, res, next) => {
    let id = req.body.id
    let updatedContent = req.body.content;
    Post.findByIdAndUpdate(id, {content: updatedContent}, (err, doc) => {
        if (err) { return console.error(err);}
        console.log('Post content updated');
        res.redirect('/');
    }); 
});

I used Handlebars for my template engine…

home.hbs

<div class="wrapper">
    <div id="postlist">
        {{# each posts }}
        <div class="post">
            <h3>{{this.title}}</h3>
            <h5>{{this.date}}</h5>
            <p>{{this.content}}</p>
            <hr>
        </div>
        {{/each}}
    </div>
    <div id="newpost">
        <form action="/post" method="post">
            <input type="text" name="title" placeholder="Enter post title here">
            <textarea name="content" id="content" placeholder="Enter post content here" cols="30" rows="10"></textarea>
            <input type="submit" value="Submit Post">
        </form>
        <hr>
        <form action="/post/edit" method="post">
            <input type="text" name="id" placeholder="Enter post id">
            <input type="submit" value="Get Post">
        </form>
    </div>
</div>

post.hbs

<div class="post">
    <h4>{{post.id}}</h4>
    <h3>{{post.title}}</h3>
    <h5>{{post.date}}</h5>
    <p>{{post.content}}</p>
    <hr>
</div>
        <form action="/post/update" method="post">
            <input type="text" name="id" value="{{post.id}}">
            <input type="text" name="title" >
            <textarea contenteditable="true" name="content" id="content" cols="30" rows="10">{{post.content}}</textarea>
            <input type="submit" value="Submit Post">
        </form>

On the home page home.hbs, I have a form for creating a new post as well as a form for calling up a post to be edited. On submit for that second form, I’m taken to an editing page post.hbs where I can edit my post content. Note the contenteditable attribute for the <textarea>.

2 Likes

lol darn you and your Handlebars preference. But seriously, thank you for replying. I will give it a shot!

I’m sure you can make it work with ejs easily enough. Let me know if you have any questions about it.

1 Like