title: How to change CSS on UI elements after an .ajax call
body: <p>I have a Symfony app for which I'm uisng a Bootstrap front end.</p>
  
  <p>I'm trying to use ajax to toggle the state of an item in the database.  Whenever <code>a.isActive</code> is clicked, my <code>/admin/toggleProgramActive</code> route should be called.  This route contains code to update the database appropiately.  When successful, <code>.done</code> ought to be called, and the jQuery therein should run (changing the styling on some elements).</p>
  
  <p>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.</p>
  
  <p>Here's the relevent code:</p>
  
  <p>HTML:</p>
  
  <pre><code>...
  &lt;tbody&gt;
      &lt;tr class="bg-primary no-hover"&gt;
          &lt;th ...&gt;
              &lt;div&gt;
                  &lt;a href="#" 
                     class="isActive" 
                     data-program-id="{{ program.programId }}"&gt;
                      &lt;span class="fa fa-power-off {{ active  ?  'active'  :  'non-active' }}" &gt; &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/div&gt;
          &lt;/th&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  ...
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(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")
                  });
              })
      });
  });
  </code></pre>
  
  <p>I know that <code>.done</code> is being called.  If I place a <code>console.log(element)</code> after <code>.done(function() {</code> I can see it returning <code>[a.isactive]</code> in the Chrome console.</p>
  
  <p>Any idea what I'm doing wrong?  How should I go about changing CSS after an ajax call?</p>