Done function never called after $.ajax

I'm a bit new to all this (including Javascript callbacks and ES6). I'm using NodeJS + Express + MongoDB.

I'm calling an Ajax function to update an item and the success Ajax call is never done.

Here is my Ajax call (called from React)

editBug : function(bug){

    console.log('about to edit bug with these values',bug);
    $.ajax({
        url:'/api/bugs',
        method: 'PUT',
        data:bug
    })
    .done((jqxhr) => {
        console.log('succcess while editing the bug');
        this.setState({successVisible : true});
    })
    .fail((jqxhr) => {
        console.log('error : ' + jqxhr);
    })  
},

Here is my API function:

app.put('/api/bugs',function(req,res){

    //console.log('req',req);
    console.log('query string : ',req.query);
    console.log('query params : ',req.params);
    console.log('query body: ',req.body);
    let id = new ObjectID(req.body._id);
    req.body._id = new ObjectID(req.body._id);

    db.collection('bugs').replaceOne(
        {_id:id},
        req.body,
        function(err,result){
            assert.equal(err,null);
            console.log('Successfull replace!');
            res.status(200);
        }
    );
});

The Successfull replace! log is correctly shown on the server side. The about to edit bug with these values is correctly shown on the front side. But the succcess while editing the bug log is not shown on front end and it seems .done call is never executed.

I tried to find help here and to do different stuff, but can't make it work - which also means I haven't figured out exactly all JS callbacks work ;)

Hope you guys can help me!

Thanks in advance! Nicolas.

via nicolasdaudin