Adding an item to Gridster.js grid with native add_widget causing unknown errors

Question

I've been trying all morning to add a simple item to a gridster grid but get errors in reference to gridsterjs' add_widget can someone please give me details on how to dynamically add widgets?

Perhaps I'm not instantiating correctly or missing a dependency...

$(function(){
    gridster = $(".gridster ul").gridster({
        widget_margins: [10, 10],
        widget_base_dimensions: [140, 140]
    });

    // errors why?
    gridster.add_widget.apply(gridster, ['<li class="gw_s">The HTML of the widget...</li>', 2, 1]); // Cannot read property 'apply' of undefined
    gridster.add_widget('<li class="gw_s">The HTML of the widget...</li>', 2, 1); // Uncaught TypeError: gridster.add_widget is not a function

});

Answer 1

That is not how you get the gridster object.. Try this:

$(".gridster ul").gridster({
    widget_margins: [10, 10],
    widget_base_dimensions: [140, 140]
});
var gridster = $(".gridster ul").gridster().data('gridster');

Now you can use the function gridster.add_widget(html, 2, 1);