Question

I’m missing something obvious I’m sure. Hoping I can explain the problem without posting vast amounts of app specific code

I’m loading table contents from json data retrieved via an application’s rest api

This all happens in a function called makeTable() which populates a pre-existing table with an empty tbody with JQuery .append() for each tr – no problem there…

I then have to run through the table again making more ajax calls to update one cell in each table row based on it’s contents. This takes a while so I want teh table to render, then update as the second lot of data comes in. I do this in a function called updateTable() which iterates through the table using JQuery updating the data in the relevant TD – that also works fine

so…

$(document).ready(function(){
 makeTable();
 updateTable();
 });

My uderstanding of .append is that it updates immediately. What is actually happening is that the table is not displayed until all the code in updateTable has completed

What I want to happen (in crappy pseudocode) is

When DOM is ready {
  call makeTable function
  display the table for the user
  call updateTable function
  }

Hopefully that’s enough to work with

Answer 1

Call updateTable in a setTimeout(..., 0)

setTimeout(function () {
   updateTable();
}, 0);