title: Bootstrap datatables: Can't display data in expanded row if I get data by AJAX
body: <p>I'm using <a href="https://datatables.net/" rel="nofollow noreferrer">DataTables</a> for display some data. I need to make every row a collapsible and download some additional info about current row after clicking on it. </p>
  
  <p>Based on <a href="https://datatables.net/examples/api/row_details.html" rel="nofollow noreferrer">documentation</a> I've prepared this:</p>
  
  <pre><code>$('#tasks tbody').on('click', 'tr.details-control', function () {
      var tr = $(this).closest('tr');
      var row = table.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(getToolsForUser(row.data())).show();
          tr.addClass('shown');
      }
  });
  </code></pre>
  
  <p>It's working but only if I returned static data from <code>getToolsForUser()</code>. Getting data by AJAX and returned it in <code>success</code> function throw an error in console:</p>
  
  <blockquote>
    <p>TypeError: row.child(...) is undefined</p>
  </blockquote>
  
  <p>I also tried with <code>$.Deferred</code> and <code>done()</code> and the result was the same ^</p>
  
  <p>Live example you can find <a href="https://jsfiddle.net/dwbavnow/" rel="nofollow noreferrer">here</a>.</p>
  
  <p><em>(Comment 17th line and uncomment 19th line for make it works - but only on static data)</em></p>
  
  <p>How can I use ajax call in function called from <code>row.child().show()</code>?</p>