title: Show Bootstrap Alert on AJAX request error
body: <p>I have a simple AJAX request that updates some PHP session variables based on some selections in a table. If there's an error with the AJAX request I change the colour of the table row that they selected (it usually changes to green if they select 'Yes' and red if they select 'No'). This is all working well.</p>
  
  <p>I would now like to display one of the dismissible Bootstrap alerts on the screen as well, like in their example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="alert alert-warning alert-dismissible" role="alert"&gt;
    &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
    &lt;/button&gt;
    &lt;strong&gt;Warning!&lt;/strong&gt; Better check yourself, you're not looking too good.
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>but I'm not sure how I can cause this to be displayed when there's an error with the AJAX request. Here's my script:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('button.btn-success').click(function() {
      var refreshItemID = $(this).closest('tr').attr('id');
      console.log(refreshItemID);
      // Create a reference to $(this) here:
      $this = $(this);
      $.post('updateSelections.php', {
        refreshItemID: refreshItemID,
        selectionType: 'yes'
      }, function(data) {
        data = JSON.parse(data);
        if (data.error) {
          console.log(data);
          console.log('something was wrong with the ajax request');
          $this.closest('tr').addClass("warning");
          return; // stop executing this function any further
        } else {
          console.log('update successful - success add class to table row');
          $this.closest('tr').addClass("success");
          $this.closest('tr').removeClass("danger");
          //$(this).closest('tr').attr('class','success');
        }
      }).fail(function(xhr) {
        console.log('ajax request failed');
        // no data available in this context
        $this.closest('tr').addClass("warning");
      });
    });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>You can see it adds a warning class to the table row if there's an error:</p>
  
  <pre><code>$this.closest('tr').addClass("warning");
  </code></pre>
  
  <p>but I'm not sure how to extend this to also add a dismissible alert (and how to control the positioning of that alert)?</p>