title: Load html into Datatable child row using ajax
body: <p>I am trying to load the html returned from a controller into a div when the user clicks on the row of a table.</p>
  
  <p>Here is my code: </p>
  
  <pre><code>   // Add event listener for opening and closing details
     jQuery('#exRowTable tbody').on('click', 'td.details-control', function () {
       var tr = $(this).closest('tr');
       var row = exRowTable.row(tr);
  
        if (row.child.isShown()) {
                      // This row is already open - close it
                      row.child.hide();
                      tr.removeClass('shown');
                  }
                  else {
                      // Open this row
                      row.child(format()).show();
                      tr.addClass('shown');
                      loadChildRow(row);
                  }
              });
  
  
   function format() {
              return '&lt;div id="detailsDiv"&gt;&lt;/div&gt;';
          };
  
          function loadChildRow(row) {
              $.ajax({
                  type: 'GET',
                  url: '@Url.Action("ChildRow","Users",new{ id= 1})',
                  data: null,
                  success: function (data) {
                     $('.detailsDiv').innerHTML = data;                        
                  }
              });
          };
  </code></pre>
  
  <p>However this is not actually inserting the html properly.</p>
  
  <p>I think it could have something to do with the div being added dynamically to the dom.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Also, I would some how like to pass the <code>row</code> var into the `loadChildRow()1 function and then be able to select only from divs within that row. any idea how i can do this?</p>