title: D3: cannot load json data from database using PHP
body: <p>I have my D3 code in <code>main.js</code> to load data from a PHP script <code>get_data.php</code> and display it using <a href="https://datatables.net/" rel="nofollow noreferrer">DataTables</a>. After loading this initial table, all rows are assigned a class <code>.data-cell</code>, which I bind with a click-listener that loads a second table using another PHP script <code>get_secondary_data.php</code>.</p>
  
  <pre><code>$(document).ready(function () {
  
      d3.json('../php/get_data.php', function (data) {
  
          console.log(data);  // first console log output
  
          var rows = add_row(data);
          var cells = add_cell(rows); // draw cells and add class data-cell to each
  
          $('#data-table').DataTable();
  
          d3.selectAll('.data-cell').on('click', function (d) {
              // extract the data url
              console.log(d.data_url); // second console log output
  
              // draw secondary table
              load_secondary_table(d.data_url);
  
          });
      });
  });
  
  function load_secondary_table(data_url) {
      d3.json('../php/get_secondary_data.php', function (secondary_data) {
          console.log(secondary_data); // third console log output
  
          // drawing secondary table logic
      });
  }
  </code></pre>
  
  <p>The first script loads the data fine, and I can see the output of 1st console log. The second console log is also fine, I can see the data_url of the correct row that I click. However, the third console log output secondary_data as <code>null</code>.</p>
  
  <p>I have run the second PHP script by itself and it returns the correct result. I have also checked the Chrome's Network tab and did see the correct JSON output in the response of the second PHP script. It just not gets loaded into my page.</p>
  
  <p>May I know what's wrong?</p>