title: Retrieving JSON data and display in a table with AJAX
body: <p>I am very new to programming with jQuery. I've spent quite a while trying to move forward with this, and I've managed to get some of it done. But I've really hit a wall and I can't seem to find help from anywhere/anyone.</p>
  
  <p><strong>Scenario:</strong></p>
  
  <ul>
  <li><p>I am using a select box to store different music genres, which I have retrieved via PHP/MySQL.</p>
  
  <pre><code>    &lt;?php
  include 'connectingDB.php';
  $catSQL = "SELECT * FROM category ORDER BY catDesc";
  $queryresult = mysql_query($catSQL)
  or die (mysql_error());
  echo "&lt;select id= \"catID\"&gt;";
  while ($row = mysql_fetch_assoc($queryresult)) {
      $catID = $row['catID'];
      $catDesc = $row['catDesc'];
  
  
      echo "&lt;option value = \"$catID\"&gt;$catDesc&lt;/option&gt;\n";
  
  }
  echo "&lt;/select&gt;";
  mysql_free_result($queryresult);
  mysql_close($conn);
  ?&gt;
  </code></pre></li>
  <li><p>When I click on a genre, I want all of the related CDs and CD information to be retrieved in JSON format and dynamically displayed in a table using AJAX (below the select box on that same page)</p>
  
  <pre><code>&lt;?php
  header('Content-type: application/json');
  include 'connectingDB.php';
  $category = $_REQUEST['catname'];
  $sql = "SELECT `CDID`, `CDTitle`, `CDYear`, `pubID`, `CDPrice`
          FROM `tiptop_cd`
          INNER JOIN tiptop_category
          ON tiptop_cd.catID=tiptop_category.catID
          WHERE catDesc = '{$category}'";
  $result = mysqli_query($con,$sql);
  $row = mysqli_fetch_array($result);
  while($row = mysqli_fetch_array($result)){
      $returned[] = $row;
  }
  echo json_encode($returned);
  </code></pre>
  
  <p>?></p></li>
  <li><p>All of the above code works on its own. But I'm looking to connect it all together. I think it needs to be via an <code>onchange</code> event in jQuery?</p></li>
  <li><p>I've got an <code>alert</code> to pop up after clicking a category, but that's as far as I can get..</p>
  
  <pre><code>$(document).ready(function(){
  $("#catID").change(function(){
  alert("The text has been changed.");
  });
  });
  </code></pre></li>
  </ul>
  
  <p>Does it need to be in a <code>foreach</code> loop? Or a <code>foreach</code> within a <code>foreach</code>?</p>
  
  <p><strong>To summarize, I'm trying to understand how to: display the cds and cd information that are related to the specific category that is currently selected, in a dynamic table with ajax</strong></p>
  
  <p>Any help is massively appreciated.</p>