javascript gridstack framework lazyloading

Question

Hy i want to use gridstack to create a page with little widgeds in it. My problem is when i "lazy" load widgeds, gridstack won't initialize this new dom nodes. (they are not moveable) Can some one explain me how i do this right? i think my problem is that $('.grid-stack').gridstack(options); is only executet once as i have seen here: https://github.com/troolee/gridstack.js/blob/master/src/gridstack.js#L1727

Or is there a frame work that already is aware of "lazy" loading.

index.html:

<div class="grid-stack" id="widgeds">
    <div class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide ui-resizable-disabled"
        data-gs-x="0" data-gs-y="0"
        data-gs-width="1" data-gs-height="1">
            <div class="grid-stack-item-content ui-draggable-handle">Item 1</div>
    </div>
    <div class="grid-stack-item"
        data-gs-x="1" data-gs-y="0"
        data-gs-width="1" data-gs-height="1">
            <div class="grid-stack-item-content">Item 2</div>
    </div>
</div>
<script type="text/javascript">
        var girdstackRefresh = function() {
            var options = {
                cell_height: 200,
                vertical_margin: 10
            };
            $('.grid-stack').gridstack(options);
        }
        $(function () {
            girdstackRefresh();

            loadWidged('/widgeds/chat', function() {
                girdstackRefresh();
            });

        });
//function for lazy loading:
var widgeds = {};
function loadWidged(srcUrl, onloaded) {
    $.get(srcUrl+"/meta.wjs", function(meta) {
        code = "var foo = function() { return "+meta+"; }\nfoo();";
        widged = eval(code);
        if(widged.singleton) {
            if(widgeds[widged.uid]) {
                throw({'message' : 'Error widged can only be loaded once'});
            }
        }
        widged.url = srcUrl;
        widged.init.bind(widged);
        var ui = $('<div class="grid-stack-item ui-draggable ui-resizable ui-resizable-autohide ui-resizable-disabled" data-gs-x="5" data-gs-y="1" data-gs-width="4" data-gs-height="2">')
        $("#widgeds").append(ui);
        widged.dom = ui;
        widged.init();
        widgeds[widged.uid] = widged;
        onloaded();
    });
}
        </script>

Example of a Widged:

chat/meta.wjs:

{
    "uid"       : "SockIoChat",
    "singleton" : true,
    "init"      : function() {
        console.log("debug:");
        console.log(this.url);
//        $.loadCSS('style.css');
        this.dom.load(this.url+"/chat.html")
    }
}

chat/chat.html:

<div class="grid-stack-item-content ui-draggable-handle">Item 2</div>

Answer 1

Just load it once you done with your lazyloading as a callback or something or use setTimeout funciton to initialize it.

Answer 2

This can be done by using the addWidget or makeWidget functions found here in the documentation:

https://github.com/troolee/gridstack.js/tree/develop/doc#addwidgetel-x-y-width-height-autoposition-minwidth-maxwidth-minheight-maxheight-id

https://github.com/troolee/gridstack.js/tree/develop/doc#makewidgetel

makeWidget is used if you want to convert an existing element to a gridstack element, whereas addWidget will create the element and also make it a widget.