CODEWITHSUNDEEP
jqueryajax
Eric T
Eric T

Reputation: 220

JQuery - dynamic table updates

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

Upvotes: 1

Views: 470

Answers (2)

Fox32
Fox32

Reputation: 13570

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

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

Upvotes: 1

wormhit
wormhit

Reputation: 3837

Try using callback functions in ajax onSuccess functions.

So when makeTable function will be really done display the table for user and when that is done update table using timeout as @Fox32 said.

backbone.js would be really good for this kind of stuff.

Upvotes: 0

Related Questions