I have a Symfony app for which I'm uisng a Bootstrap front end.

I'm trying to use ajax to toggle the state of an item in the database. Whenever `a.isActive` is clicked, my `/admin/toggleProgramActive` route should be called. This route contains code to update the database appropiately. When successful, `.done` ought to be called, and the jQuery therein should run (changing the styling on some elements).

However, here's what's happening instead: My Symfony route is being called, and the database is being updated. But... jQuery never triggers the UI changes.

Here's the relevent code:

HTML:

```
...
<tbody>
    <tr class="bg-primary no-hover">
        <th ...>
            <div>
                <a href="#" 
                   class="isActive" 
                   data-program-id="{{ program.programId }}">
                    <span class="fa fa-power-off {{ active  ?  'active'  :  'non-active' }}" > </span>
                </a>
            </div>
        </th>
    </tr>
</tbody>
...

```

JavaScript:

```
$(document).ready(function ()  {
    $(".isActive").on('click', function()  {
        var element = $(this);
        $.ajax({
            type: "post",
            url:  "/admin/toggleProgramActive",
            data: {"id": $(this).data('program-id')}
        })
            .done(function() {
                element.closest("tr").css('background-color', '#FF6600');
                element.closest("tbody").effect("highlight", {}, 600, function()  {
                    $(this).find("tr.bg-primary").css('background-color', "#337AB7")
                });
            })
    });
});

```

I know that `.done` is being called. If I place a `console.log(element)` after `.done(function() {` I can see it returning `[a.isactive]` in the Chrome console.

Any idea what I'm doing wrong? How should I go about changing CSS after an ajax call?