title: How to render HTML with jQuery from an AJAX call
body: <p>I have a select box with a list of books. The user can select a book and hit the submit button to view the chapters on a separate page.</p>
  
  <p>However, when the user changes the select box, I would like a partial page refresh to display the past notes the user entered on the book, and allow the user to write a new note for that book. I do not want the review and creation of notes for a particular book done on the next page with the chapters, as it will clutter it up.</p>
  
  <p>I'm using Python/Bottle on the backend and its SimpleTemplate engine for the front end.</p>
  
  <p>Currently, when the select box is changed, an ajax call receives a Json string containing the book information and all the notes. This json string is then converted into a json object via <code>jQuery.parseJson()</code>.</p>
  
  <p>What I would like to be able to do is then loop over the notes and render a table with several cells and rows.</p>
  
  <p>Would I have to do this in jQuery/js (instead of bottle/template framework) ? I assume so as I only want a partial refresh, not a full one.</p>
  
  <p>I'm looking for a piece of code which can render a table with variable numbers of rows via jQuery/js from a json object that was retrieved with ajax.</p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Book Notes Application - Subjects&lt;/title&gt;
      &lt;script src="http://code.jquery.com/jquery-latest.min.js"
          type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          $(document).ready(function(){
              $('#subject_id').change(function(){
                  var subject_id = $(this).val();
                  $.ajax({
                      url : "subject_ajax?subject_id=" + subject_id,
                      success : function(data) {
                          alert(data)
  
                          json = jQuery.parseJSON(data);
                      },
                      error : function() {
                          alert("Error");
                      }
                  });
              })
          })
  
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;!-- CHOOSE SUBJECT --&gt;
      &lt;FORM action="/books" id="choose_subject" name="choose_subject" method="POST"&gt;
          Choose a Subject:
          &lt;select name="subject_id" id="subject_id"&gt;
              % for subject in subjects:
                  &lt;option value="{{subject.id}}"&gt;{{subject.name}}&lt;/option&gt;
              % end
          &lt;/select&gt;&lt;input type="submit" name="sub" value="Choose Subject"/&gt;
          &lt;BR /&gt;
      &lt;/FORM&gt;
  </code></pre>