title: Jquery .load() one step behind
body: <p>I have a section on a webpage that is generated like this.</p>
  
  <pre><code>&lt;table&gt;
      &lt;c:forEach items="${personList}" var="person"&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;h2 style="text-align:left;"&gt;${person.reviewName}&lt;/h2&gt;              
                  &lt;h2 style="text-align:right;"&gt;by ${person.name}&lt;/h2&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td style="text-align:right;"&gt;
                  &lt;img src="&lt;c:url value="/resources/${person.id}.jpg" /&gt;" &gt;
              &lt;/td&gt;
              &lt;td&gt;
                  ${person.review}
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;div id="${person.id}" class="comment"&gt;comments&lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr id="ins${person.id}"&gt;
              &lt;td&gt;
  
              &lt;/td&gt;
              &lt;td id="comments${person.id}" style="display:none"&gt;
              &lt;div id="ins${person.id}"&gt;
                  &lt;table&gt;
                          &lt;c:forEach items="${person.comments}" var="comment"&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;
                                      ${comment} 
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/c:forEach&gt;
                  &lt;/table&gt;
                  Add Comment:
                  &lt;textarea id="comment${person.id}"&gt;&lt;/textarea&gt;
                  &lt;button onClick="addComment(${person.id})"&gt;add Comment&lt;/button&gt;
              &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/c:forEach&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I'm trying to use JQuery.load() to instantly update the comments section when a new comment is added like this.</p>
  
  <pre><code>function addComment(id) {
      $.getJSON("addComment", {id:id, comment:$("#comment" + id).val()});
      $("#comments2").load("home #ins2");
  }
  </code></pre>
  
  <p>The problem is when the when I click to add the comment it only displays the comment I previously added, meaning the comments section is always one comment behind. If I load the page directly after adding the comment it displays as it should. Another strange thing is that when I do add the comment a blank line is inserted a the top of the comments, which isn't there/goes away when I load the page directly.</p>
  
  <p>I thought this might be some kind of cache problem so tried to turn it off using</p>
  
  <pre><code>$.ajaxSetup ({
      cache: false
  });
  </code></pre>
  
  <p>However this made no difference.</p>
  
  <p>I'm really at a dead end with this. Is it something to do with the section I'm pulling with load() being a forEach tag?  </p>