ajax doesn't update element in real-time

Question

Review the following jQuery .on() method making an ajax call:

 $('tbody').on('click', 'button',function() {
        var updInfo = {}; 
        updInfo.unqid = $(this).closest('tr').attr('unqid');        
        $.ajax({
            url: "http://localhost/ReceptionVisitorKiosk/basecoat/server/checkout.php",
            data: updInfo,
            type: 'POST',
            dataType: 'json',
        }).done(function(data) {            
            $(this).closest('tr').removeClass('active-visitor').addClass('inactive-visitor');   
            $(this).addClass('glyphicon glyphicon-ok'); 
            console.log(data); 
        }).fail(function(status,errorThrown){
            console.log(errorThrown);
        }).always(function(xhr,status){
            console.log("The request 2 is complete");
        }); // End AJAX call 
    });

When the user clicks the button the php script is called and updates the database. However, we should expect .done() to then remove and add the classes to $(this). I can't see that happening in the browser or f12 > inspector view

Upon a full page refresh, the class change is visible.

@RolandStarke: Or better yet, rather than stumbling around in the dark with a `console.log` torch, turn on the lights with the fully-featured debugger built into the browser. ;-) — T.J. Crowder, Mar 09 '17 at 05:47
Duplicate of [*How to access the correct `this` inside a callback?*](http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) `this` within the `done` callback isn't what `this` is in the `on` callback. See that question's answers for an explanation and options. For instance, you can do `var $btn = $(this)` before the ajax call and then use `$btn` instead of `$(this)` in the `done` handler. — T.J. Crowder, Mar 09 '17 at 05:48

ajax doesn't update element in real-time

0 Answers0