title: Ajax POSTS not updating screen content
body: <p>So I have a "scenario", made up of lots of "forms" which contain lots of "events" and "data" etc.  To populate all this information I have this in the page to run once the page is finished</p>
  
  <pre><code>$(document).ready(function() {
  var scenarioID = ${testScenarioInstance.id}
  var myData = ${results as JSON}
  populateFormData(myData, scenarioID);
  });
  </code></pre>
  
  <p>This then calls the functions below (the first calls the second, done like this as I had an issue where as it was ajax the variables in the loop were updating before things were being appended and so everything ended up in the last sub table): -</p>
  
  <pre><code>function populateFormData(results, scenarioID) {
      $table = $('#formList')
      for ( var i in results) {
          var formIDX = (results[i]["forms_idx"])
          var formID = (results[i]["form_id"])
          appendSubTable(formIDX, scenarioID, $table, formID);
      }
  }
      function appendSubTable(formIDX, scenarioID, $table, formID) {
      var url = "http://localhost:3278/FARTFramework/testScenario/ajaxPopulateSubTables"
      $.post(url, {
          formIDX : formIDX, scenarioID : scenarioID, formID :formID 
      }, function(data) {
          var $subTable = $table.find("#" + formIDX).find('td:eq(1)').find("div").find("table")
          $subTable.append(data)
      }).fail(function() {
          alert("it failed!")
      });
  }
  </code></pre>
  
  <p>This then goes off grabs the data from the controller like so..</p>
  
  <pre><code>def ajaxPopulateSubTables(int formIDX, int scenarioID, int formID) {
          def db = new Sql(dataSource)
  
          String mySQL = "Loads of SQL STUFF"
          def subTableResults = db.rows(mySQL)
  
          render(template: "subTableEntry", model: [subTableResults:subTableResults, formID:formID, formIDX:formIDX])
      }
  </code></pre>
  
  <p>and fires it at the gsp: </p>
  
  <pre><code>    &lt;colgroup&gt;
          &lt;col width="150"/&gt;
          &lt;col width="350"/&gt;
          &lt;col width="350"/&gt;
          &lt;col width="350"/&gt;
      &lt;/colgroup&gt;
  &lt;g:if test="${subTableResults != null &amp;&amp; !subTableResults.isEmpty()}"&gt;
      &lt;tr&gt;
          &lt;th&gt;eventIDX&lt;/th&gt;
          &lt;th&gt;eventID &lt;/th&gt;
          &lt;th&gt;objID&lt;/th&gt;
          &lt;th&gt;testVal&lt;/th&gt;
      &lt;/tr&gt;
  &lt;/g:if&gt;
  
  
  &lt;g:each in="${subTableResults}" status = "i" var="item"&gt;
      &lt;tr id = ${i} class="${((i) % 2) == 0 ? 'even' : 'odd'}" name="main"&gt;
          &lt;td&gt;${item.events_idx}&lt;/td&gt;
          &lt;td&gt;${item.type}&lt;/td&gt;   
          &lt;td&gt;${item.object_description}&lt;/td&gt;
          &lt;td&gt;&lt;g:textField id = "testData[${formIDX}:${formID}:${i}]" name="testData[${formIDX}:${formID}:${i}]" value="${item.value}" optionKey="id" /&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/g:each&gt;
  </code></pre>
  
  <p>Before then jamming it into the relevant sub table.</p>
  
  <p>The problem is, sometime when I load up a page not all the sub tables are filled out, but if I hit F5 to refresh the page this then seems to fix the issue...  Although not always, sometimes I then get a different section not refreshing :(</p>
  
  <p>I put a println into the controller to see if all the SQLs were being fired off but it always returns all the individual form SQL strings fine...</p>
  
  <p>Looking in firebug all the POSTs are coming back fine but the page just isn't updating...</p>
  
  <p>Any suggestions or ideas as to what might be causing this would be appreciated, I'm at a loss..</p>
  
  <p>I also tried updating my appendSubTable function where the post is to include a fail in case something was failing, but this isn't hit either, have updated code above to show this</p>