Populating and updating an oddly shaped grid (or table) with JQuery and AJAX

Question

Hi all-

I have a weird grid with different height columns. By this I mean, column 1 may have 4 squares that need to be filled while column 2 may have 5 and column 3 may have 2. For the purposes of this question assume they are static and the values are as follows:

Col   |  Height
---------------
1         4
2         3
3         5
4         2
5         3

My first ajax call will return an array of items. Each item will have a name and a url.

The function to process the original call will likely look something like this:

var processJSONResult = function (data ) {

  myglob= data.data;
  $.each(data.data, function(i, item){

   url = item.url;
   name = item.name; 

  });
}

So this gets to question one: What is the most efficient way to populate the grid initially. Do I have an html template and then just fill it one by one? Or do I dynamically create the grid and then fill it?

The second part of the question relates to updating. Every so often, the page will initiate an ajax call for new entries. If entries show up, we will need to randomly (or not, but i figure randomly is easier) add them to the grid, replacing one of the old grid entries.

So the second question: What is the best method to go about this taking into account whatever you think is best in part one?

I know this is a doozy of a question, so thanks all who take the time to look at it.

Answer 1

Well since it’s static this would work..

Let’s say you have an HTML document with a complicated TABLE (nested or not..) All you have to do is have a couple of <span id=“squareN”> where squareN is the name or number of your square..

then your server could respond the following JSON string:

{“squareA":123, “squareB":456, “squareN":567}

on the client side, all you need to do is:

$.getJSON("myserver.php", function(squareName, squareValue)
{   $("#" + squareName).text(squareValue); }

Answer 2

This is actually what I ended up doing

var populateFPTracks = function(data)
{
    currentcounter=0;
    //alert(data.data[1].track);
    for (x=0; x < totalcols; x++)
    {
        var $colheight= Math.floor(Math.random()*6)+1;
        for (y=0; y < $colheight; y++)
        {
            name = data.data[currenttrackcounter].track.name
            url = data.data[currenttrackcounter].track.url
            currenttrackcounter++;
            $("#do_col"+x).append('<div class="do_trackbox"></div>');
        }

    }