title: Ajax call not appending data to tfoot elements (but works properly in thead elements)?
body: <p>I have several select inputs in a row inside of my table (for column filtering) that populate options through ajax responses using jquery. They are currently in a second thead and append properly, but I would like to move them into a tfoot instead.</p>
  <p>Currently I have this ajax call, and it properly appends the data when my elements are inside a thead:</p>
  <pre class="lang-js prettyprint-override"><code>$(document).ready(function ()
  {
      $.ajax({
          url: &quot;?handler=loadDropdowns&quot;,
          type: &quot;POST&quot;,
          dataType: &quot;json&quot;,
          beforeSend: function (xhr) {
              xhr.setRequestHeader(&quot;RequestVerificationToken&quot;,
                  $('input:hidden[name=&quot;__RequestVerificationToken&quot;]').val());
          },
          async: true,
          success: function (response) 
          {
              $(&quot;#requesttos&quot;).empty().append('&lt;option&gt;All&lt;/option&gt;');
              $(&quot;#requesttos&quot;).append('&lt;option selected&gt;' + response.user + '&lt;/option&gt;');
              $.each(response.requesttos, function (index, value) {
                  $(&quot;&lt;option/&gt;&quot;, {
                      value: index,
                      text: value
                  }).appendTo($(&quot;#requesttos&quot;));
              });
              
              $(&quot;#groups&quot;).empty().append('&lt;option selected&gt;All&lt;/option&gt;');
              $.each(response.groups, function (index, value) {
                  $(&quot;&lt;option/&gt;&quot;, {
                      value: index,
                      text: value
                  }).appendTo($(&quot;#groups&quot;));
              });
          }
      }
  }
  </code></pre>
  <p>However, once I switch it to a tfoot, nothing populates anymore :( Why does my ajax response properly load when my elements are in a thead, but moving to a tfoot doesn't load anything at all?</p>
  <p>Here's my full table (shortened for simplicity):</p>
  <pre class="lang-html prettyprint-override"><code> &lt;table class=&quot;table table-bordered table-striped nowrap w-100&quot; id=&quot;myTable&quot;&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      Request To
                  &lt;/th&gt;
                  &lt;th&gt;
                      Group
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  &lt;!--tbody is populated w/ server-side DataTable--&gt;
          &lt;tfoot&gt;
              &lt;tr&gt;
                  &lt;th&gt;
                      &lt;select id=&quot;requesttos&quot;&gt;&lt;/select&gt;
                  &lt;/th&gt;
                  &lt;th&gt;
                      &lt;select id=&quot;groups&quot;&gt;&lt;/select&gt;
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
      &lt;/table&gt;
  </code></pre>
  <p>EDIT: This has something to do with my DataTable overriding what's being appended! I'll continue to test for a fix. Thanks!</p>