I am getting an error deleting an object from the database, however, when I use Postman to test my code it works so I think my ejs syntax is incorrect.

ejs code

                    <center> <a class="delete_category_a" href="/halalMunchies/update-category/<%= category._id%>" style="color: red "> Delete </a> </center>

delete Route

    exports.deleteCategory = (req, res, next) => {

    console.log('DELETE  CATEGORY /delete-category');

    const id = req.params.id;
   

    categorySchema.findByIdAndDelete(id)
        .then(result => {
            //res.redirect('/halalMunchies/all-categories');
            res.send(console.log(result));
        })
        .catch(err => {
            console.log(err);
        });

};

browser error

Cannot GET /halalMunchies/delete-category/6187cb11e3b98a7aa70a277a

CodePudding user response：

Your current code is sending a GET request (it's just a plain link), but your request handler is for a DELETE request. The actual <form> in your current code is not doing anything and is not part of the current action.

Because neither a link or a form can directly send a DELETE request, you have these options:

1. You can use this technique to send a form POST and configure Express to automatically turn it into a DELETE request for you (using middleware) because you can't send a DELETE via a form submission in a browser.

2. You can use the fetch() interface in Javascript to intercept the click or form post and send the same above POST request that Express will turn into a DELETE request.

3. You can use the fetch() interface in Javascript to intercept the click or form post and send a DELETE request directly using Javascript.

4. You can change your Express route to expect a POST and then use either a form submission or a fetch() request that sends the POST.

I would recommend either #1 or #3.

Example code of using fetch() to send a DELETE request:

const url = "/halalMunchies/update-category/<%= category._id%>";

fetch(url, {
    method: "DELETE",
    credentials: "include"
}).then(result => {
   // handle completion here
}).catch(err => {
   // handle error here
});

CodePudding user response：

You can use JQuery to create a DELETE request like this

$.ajax({
  type: "DELETE",
  url: `/route`,
  data: { /* as an object */ },

  success: function (data) {
    console.log(data);
  },

  error: function (data) {
    console.error(data);
  },
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

Add this tag to use JQuery and after this line, reference the file where you are adding the previous code

This is not a very standard approach but since you are using ejs, this is a very practical solution.

NOTE: The script tag for JQuery might be old, so if you face a problem I suggest getting access to the latest JQuery URL