How to create a ajax POST with node JS?

Question

I am not sure how to use an ajax POST to POST from a Jade Page to Node JS. If someone can provide an example or tell me what I am missing from the script I have, please let me know.

This is the script file:

  //Add friends
    $('.addContact').click(function() {
    $.post('/addContact',
       {friendRequest: $(this).data('user')});

    if($(this).html!=='Contact Requested') {
        return $(this).html('Contact Requested');
    }
    });

The url I have for a POST on my app.js file is:

app.post('/addContact', user.addContactPost);

I am trying to post true for a click event on the button Add Contact and change it to Contact Requested if the data in the db is shown as true.

This is the jade file:

extends layout
block content   
    div
    legend Search Results
    div#userResults
    for user in ufirstName 
        a(href='/user/#{user.id}')
            p #{user.firstName} #{user.lastName}
        button.addContact Add Contact

The route file is this:

    exports.addContactPost = function(req, res, err) {
    User.findByIdAndUpdate(req.signedCookies.userid, {
                $push: {friendRequest: req.body.friendRequest}
            }, function(err) {
                if(err) {
                    console.log("post2");
                    return console.log('error');
                    //return res.render('addContactError', {title: 'Weblio'}); 

                } 

                else {
                    console.log('postsuccess');
                    //alert('Contact added');
                    res.json({response: true});

                }

            });
};

Can you debug and see if you are hitting your route? I think your problem is you're not sending anything in your post. req.body.addContact is always going to be undefined. — ThrowsException, Jul 18 '13 at 04:04

score 0 · Answer 1 · answered Jul 18 '13 at 08:53

If you are posting AJAX request, then you are expecting from JS on client-side to get some response, and react to this response accordingly. If it would be separate request to another page - then probably rendering whole page - would be actual option.

But as you just need to get response from server and then update your front-end without reloading based on response, then you need to response from server on this POST request with some JSON. And then on client-side, do some templating, use jQuery or some templating libraries on client side for it.

score 0 · Answer 2 · answered Jul 18 '13 at 14:54

Everything looks good I just think the $.post code is a little off. This might fix your problem.

 $('.addContact').click(function() {
    $.post('/addContact', { addContact : true }, function(data){
        console.log('posting...');
        $('.addContact').html(data);
    });

    ...
});

The object I added to the $.post is what is going to be sent to the server. The function you specified at the end is your callback. It's going to be called when the function returns. I think that may have been some of your confusion.

Your node route should look something like this

exports.addContactPost = function(req, res, err) {
    User.findByIdAndUpdate(req.signedCookies.userid,{
            addContact: req.body.addContact
        }, function(err) {
            if(err) {
                console.log("post2");
                res.render('addContactError', {title: 'Weblio'}); 
            } 
            //assuming express return a json object to update your button
            res.json({ response  : true });
        });
};

Ok I edited the file above for script and route file. They work fine now the only problem I have is pushing the info into the array for some reason I get an error if I POST now, with the $push added. The friendRequest in mongodb is of the array type. and if I tried to add it without push it just replaces the last friend request? — Lion789, Jul 18 '13 at 15:02
I'm not a mongo expert but that makes sense. If you say you want to update friendRequest, without the push, to this new value then it will do just that and overwrite the whole thing. It doesn't care that it's an array. by adding the push to your command you're saying you don't want to overwrite the whole thing you just want to add a new value to it. — ThrowsException, Jul 18 '13 at 15:53

How to create a ajax POST with node JS?

2 Answers2

Linked