Update MongoDB using JQuery and ExpressJS and AJAX

Question

I have got a delete function working using type: 'DELETE' this way and I am now trying to make an UPDATE function although I don't know if I'm doing this correctly, the code so far is the following:

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('/');
    });
});

So I want to update in MongoDB using $set and set the event_name to whatever the user inputs in the prompt(). The error on the consolole is:

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

sharkdawg · Accepted Answer · 2018-03-06 08:38:13Z

1

As already pointed out by Kevin you need to change your action verb from UPDATE to PUT on both client and server side.

On the server side you need to access the users input which is sent via the ajax request. If you have installed bodyparser middleware this will be available to you through req.body.

Also you are redirecting twice.

//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');
    });
});

edited Mar 6, 2018 at 8:38

answered Mar 5, 2018 at 8:47

sharkdawg

9841 gold badge8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

MrG Over a year ago

That worked! However, when I query for the data it provides it in the format: "event_name": { "data": "" }. Rather than "event_name": "data"?

MrG Over a year ago

I tried that originally, however the entire app crashes giving a: Unexpected : token. Sorry, I know is a simple syntax error but I really can't figure it out as all I did is remove the brackets. The unexpected : is the one after event_name in the $set clause

MrG Over a year ago

It's just a null value now, Before, whilst when it was just req.body it registered the input but just nested as mentioned above. What do you reckon it could be?

sharkdawg Over a year ago

I presume you are entering a value on prompt? What is the value assigned to change?

MrG Over a year ago

the input from the prompt. it registered the input before and updated mongo successfully, it's just the format it inserted it in. However removing the brackets didnt seem to have worked, i believe it may be along those lines

|

Kevin · Accepted Answer · 2018-03-05 00:05:49Z

1

Please try to change your $.ajax({ type:'UPDATE' to $.ajax({ type:'PUT' and change app.post('/events/update/:id', function(req,res) to app.put('/events/update/:id', function(req,res)

answered Mar 5, 2018 at 0:05

Kevin

1,3192 gold badges10 silver badges14 bronze badges

4 Comments

MrG Over a year ago

the error is now: jquery-1.12.4.js:10254 PUT localhost:3030/events/update/5a959fdb9effb926a0594d90 404 (Not Found)

Kevin Over a year ago

Please make sure your node js server is run under the port 3030. Is your react development server running on port 3030?

Kevin Over a year ago

If your react development server is running on 3030, probably your node js server is running on other port such as 8080. Find it and change your ajax call's url to it.

MrG Over a year ago

I'm doing an similar ajax call of type 'delete' to delete items of the list using the id In such a way. And that works. So I doubt its that?

Collectives™ on Stack Overflow

Update MongoDB using JQuery and ExpressJS and AJAX

2 Answers 2

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related