Enhance your MongoDB with the power of JQuery and ExpressJS combined with the magic

Question

Enhance your MongoDB with the power of JQuery and ExpressJS combined with the magic

I've successfully implemented a delete function using type: 'DELETE', and now I'm attempting to create an UPDATE function. However, I'm unsure if I'm approaching this correctly. Here's the code I've written so far:

ejs:

<a href="#" class="editEvent" data-id="<%= event._id %>">Edit</a></p>

js:

$(document).ready(function(){
    $('.editEvent').on('click', editEvent);
});

function editEvent(){
    var change = prompt('Change to:', '');

        $.ajax({
            type:'UPDATE',
            url: '/events/update/'+$(this).data('id'),
            data: change
        }).done(function(response){
            window.location.replace('/');
            });
}

app.js:

app.post('/events/update/:id', function(req,res){
    db.events.update({_id: ObjectId(req.params.id)}, {$set: {event_name: data}},function(err, result){
        if(err){
            console.log(err);
        }
        res.redirect('/');
    });
});

I am looking to update in MongoDB using $set and assign the input from the user in the prompt() to the event_name. The error message appearing on the console is:

UPDATE http://localhost:3030/events/update/5a959fdb9effb926a0594d90 400 (Bad Request)

javascript ajax mongodb express post

Answer 1

Answer №1

Kevin has already mentioned the need to switch the action verb from UPDATE to PUT on both the client and server sides.

To access the user's input sent via the ajax request on the server side, make sure you utilize the bodyparser middleware which will give you access to req.body.

Additionally, there seems to be a redundant redirection in your code.

//client.js    
$(document).ready(function(){
        $('.editEvent').on('click', editEvent);
    });

    function editEvent(){
        var change = prompt('Change to:', '');

            $.ajax({
                type:'PUT',
                url: '/events/update/'+$(this).data('id'),
                data: {event_name: change}
            }).done(function(response){
                console.log(response);
                window.location.replace('http://localhost:3030/');
            }).fail(function(response){
                console.log("Oops not working");
            });
    }

//app.js
app.put('/events/update/:id', function(req,res){
    const data = req.body; 
    db.events.update({_id: ObjectId(req.params.id)}, {$set: data},function(err, result){
        if(err){
            console.log(err);
        }
        res.send('updated successfully');
    });
});

Answer 2

Kevin has already mentioned the need to switch the action verb from UPDATE to PUT on both the client and server sides.

To access the user's input sent via the ajax request on the server side, make sure you utilize the bodyparser middleware which will give you access to req.body.

Additionally, there seems to be a redundant redirection in your code.

//client.js    
$(document).ready(function(){
        $('.editEvent').on('click', editEvent);
    });

    function editEvent(){
        var change = prompt('Change to:', '');

            $.ajax({
                type:'PUT',
                url: '/events/update/'+$(this).data('id'),
                data: {event_name: change}
            }).done(function(response){
                console.log(response);
                window.location.replace('http://localhost:3030/');
            }).fail(function(response){
                console.log("Oops not working");
            });
    }

//app.js
app.put('/events/update/:id', function(req,res){
    const data = req.body; 
    db.events.update({_id: ObjectId(req.params.id)}, {$set: data},function(err, result){
        if(err){
            console.log(err);
        }
        res.send('updated successfully');
    });
});

Answer 3

Answer №2

It is recommended to update your code by changing $.ajax({ type:'UPDATE' to $.ajax({ type:'PUT' and also updating

app.post('/events/update/:id', function(req,res)

to

app.put('/events/update/:id', function(req,res)

Answer 4

It is recommended to update your code by changing $.ajax({ type:'UPDATE' to $.ajax({ type:'PUT' and also updating

app.post('/events/update/:id', function(req,res)

to

app.put('/events/update/:id', function(req,res)

Enhance your MongoDB with the power of JQuery and ExpressJS combined with the magic

Answer №1

Answer №2

Similar questions

The sinuous waveform in JavaScript

Error: The array's property is not defined

What is the process for incorporating ejs into the source attribute of an image element?

Separate an array in TypeScript based on the sign of each number, and then replace the empty spaces with null objects

Generating exportable dynamic code in Javascript

Search functionality in Laravel using Select2

Having difficulty utilizing the express.session module in conjunction with HTTPS

Eliminating the 'white-space' surrounding concealed images

JavaScript function trying to send a POST request to API

What is the best way to run a lengthy task in Node.js by periodically checking the database for updates?

Errors in Data Capture from AJAX Dropdown Selections

Generating a tree structure using a JavaScript array

Click here to see the image

Ways to refresh the count of newly added div elements

What is the best way to compare two arrays of ids in MongoDB to find matching elements?

Keeping information saved locally until an internet connection is established

The 'import type' declaration cannot be parsed by the Babel parser

Is it possible to use reCAPTCHA without having to refresh the form page?

Convert this JavaScript function into a jQuery function

Is there a way for me to showcase a collection of pictures in an array format