Dynamically loading 2 (or more) grids isn't working

[andydjames]

My application requires grids to be added and loaded dynamically.
Adding a single grid works fine, but loading two (or more) grids results in the second one working properly but the first one failing.
My method is as follows:

1. get a 'serialisation' array of grids and widgets (from indexeddb) to load grids and widgets
2. dynamically add each of the gridster divs and uls inside a container row. Attribute unique ids to each gridster div as the namespace
3. dynamically add the li widgets inside each grid ul. Each widget contains serialize params including the parent grid.

All works fine this far (a bit like recreating the 'grid-from-serialize.html' demo but with 2 grids and multiple widgets per grid.

4. Instantiate each grid where gridster[i] will be gridster[0] and second time round gridster[1] and where thisNamespace will be the unique gridster id in the parent div.

$(function () {
        gridster[i] = $(thisNamespace+" ul").gridster({
        namespace: thisNamespace,

The second one works fine. In the first grid, the widgets are piled up on row 1 col 1 and won't move and the grid is not of the proportions defined. It's as though it hasn't been instantiated.

Here's the full code for instantiating the grids in a for loop:

    $(function () {
        gridster[i] = $(thisNamespace+" ul").gridster({
        namespace: thisNamespace,
        widget_base_dimensions: [200, 140],
        widget_margins: [10, 10],
        rows: 1,
        max_rows: 1,
        extra_cols: 5,
        min_cols: 20,
        max_cols: 25,
         serialize_params: function ($w, wgd) {
        return {
            'data-plotlineid': $w.attr('data-plotlineid'),
            'data-heading': $w.attr('data-heading'),
            'data-plotlinegrid': $w.attr('data-plotlinegrid'),
            col: wgd.col,
            row: wgd.row,
            size_x: wgd.size_x,
            size_y: wgd.size_y
            };
        },
        scroll_container: $('#story-panel-body-middle'),
        shift_widgets_up: false,
        move_widgets_down_only: true,
        s_down: false,
        collision: {
        wait_for_mouseup: true
            },
      draggable: {
                handle: 'header'
            }
      }).data('gridster');

Can anyone advise on what I might be doing wrong?
P.S. I've tried adding the widgets to each grid in a for loop after instantiating but hit the same wall.

Many thanks.

[andydjames]

Looping in a promise or setting a timeout doesn't resolve the problem.