title: Output JSON to html table
body: <p>I'm having trouble outputting a JSON to a HTML table within my tab (for part of a javascript/jQuery evening course assignment).
  Please could someone have a look, and advise what sort of amendments I would have to make to output in a table format?
  I get the success alert, but the table doesn't populate.</p>
  
  <p>Thanks.</p>
  
  <pre><code>// Tabs
  $(function() {
      $( "#tabs" ).tabs();
  });
  
  // Spanish 
  $(document).ready(function(){
      $.ajax({ 
          url:   "http://learn.cf.ac.uk/webstudent/sem5tl/javascript/assignments/spanish.php", // path to file
          dataType: 'jsonp',
          jsonp: 'callback',
          jsonpCallback: 'jsonpCallback',
          success: function () {
              alert('success');
          }               
      });
  });
  
  function drawTable(data) {
      for (var i = 0; i &lt; data.length; i++) {
          drawRow(data[i]);
      }
  }
  
  function drawRow(rowData) {
      var row = $("&lt;tr /&gt;")
      $("#table").append(row);
      row.append($("&lt;td&gt;" + rowData.course + "&lt;/td&gt;"));
      row.append($("&lt;td&gt;" + rowData.name + "&lt;/td&gt;"));
      row.append($("&lt;td&gt;" + rowData.price + "&lt;/td&gt;"));
  }
  </code></pre>
  
  <p>And the HTML:</p>
  
  <pre><code>&lt;div id="tabs"&gt;
      &lt;ol start="50"&gt;
          &lt;li&gt;
              &lt;a href="#tab-1"&gt;Italian&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#tab-2"&gt;Spanish&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ol&gt;
  
      &lt;p id="tab-1"&gt;&lt;/p&gt;
      &lt;p id="tab-2"&gt;
          &lt;table id='table'&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Course&lt;/th&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Price&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;&lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/p&gt;
      &lt;p id="tab-3"&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>