title: AJAX Response Not displaying on the page
body: <p>I am trying to have the table in my view expand into a detail row. The expand function is working, and getting the data is working. However, the detail table that I'm trying to display is not showing up. The html on the view looks something like this:</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
      &lt;tr&gt;&lt;td&gt;Column 1&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Column 2&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Column 3&lt;/td&gt;&lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
     foreach(var data in ViewData["data"] as List&lt;DataModel&gt;)
      {
      &lt;tr&gt;
          &lt;td&gt;@data.Data1&lt;/td&gt;
          &lt;td&gt;@data.Data2&lt;/td&gt;
          &lt;td&gt;@data.Data3&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td class="hiddenRow" colspan="6"&gt;
              &lt;div class="accordion-body collapse" id="@data.MembershipId"&gt;
                  &lt;div id="UpdatePanel_@data.MembershipId" class="container"&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;           
      }      
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Then I have the JQuery using the @data.MembershipId to get the data for the detail table:</p>
  
  <pre><code>    $(document).ready(function () {
      var memberId;
      $('.header').click(function () {
          $(this).nextUntil('tr.header').slideToggle(50);
          memberId = $(this).data("target").replace("#", "");
          $.ajax({
              type: "GET",
              url: "GetActivity",
              data: { membershipId: memberId },
              success: OnSuccess,
              error: OnError
          });
      });
      function OnSuccess(data) {
          var TableContent = "&lt;table&gt;" +
              "&lt;thead&gt;" +
              "&lt;tr&gt;" +
              "&lt;td&gt;Detail Column 1&lt;/td&gt;" +
              "&lt;td&gt;Detail Column 2&lt;/td&gt;" +
              "&lt;td&gt;Detail Column 3&lt;/td&gt;" +
              "&lt;td&gt;Detail Column 4&lt;/td&gt;" +
              "&lt;td&gt;Detail Column 5&lt;/td&gt;" +
              "&lt;/tr&gt;" +
              "&lt;/thead&gt;" +
              "&lt;tbody&gt;";
          for (var i = 0; i &lt; data.length; i++) {
              TableContent += "&lt;tr&gt;" +
                  "&lt;td&gt;" + data[i].data1 + "&lt;/td&gt;" +
                  "&lt;td&gt;" + data[i].data2 + "&lt;/td&gt;" +
                  "&lt;td&gt;" + data[i].data3 + "&lt;/td&gt;" +
                  "&lt;td&gt;" + data[i].data4 + "&lt;/td&gt;" +
                  "&lt;td&gt;" + data[i].data5 + "&lt;/td&gt;" +
                  "&lt;/tr&gt;";
          }
          TableContent += "&lt;/tbody&gt;&lt;/table&gt;";
          $("#UpdatePanel_" + memberId).html(TableContent);
      }
      function OnError(data) {
          alert("Error: " + data)
      }
  });
  </code></pre>
  
  <p>The JQuery AJAX call goes to my Controller to get the SQL Data and gets a List of the Data Model. The data returns correctly, and if I inspect the page, I'm seeing the table built with the data correctly, but it's not displaying anything when I expand the table row.</p>
  
  <p>I don't think this is a problem with the CSS, but I could be wrong.</p>