Question

I have a jQueryUI Tabs control on a web page. Each tab contains one or more Slickgrid grids.

Sometimes, but with no particular pattern that I have been able to discover, when removing tabs (therefore removing instances of Slickgrid), I get:

// slick.grid-2.0.merged.min.js: Microsoft JScript runtime error: Invalid argument
Z[0].styleSheet.cssText=a.join(" ")

which then propogates to

// jquery-1.7.1.min.js: Microsoft JScript runtime error: Exception occurred.
a.execScript||function(b){a.eval.call(a,b)})(b)

What’s causing this issue and how can I work around / resolve it?

Answer 1

Following the comment from @Tin, I ensured that every instance of SlickGrid was destroyed prior to the HTML element it was associated with being replaced by an Ajax result.

Leveraging

Is there a way to get an instance of SlickGrid from an element

I ended up with code like this:

Initialize SlickGrid instance:

grid = new Slick.Grid("#myGridDiv", myDataView, myColumns, myOptions);
$('#myGridDiv').data('slickgrid', grid);

General cleanup function:

function cleanupSlickGrid() {
    //@* Cleanup slickgrid instances.  See: https://stackoverflow.com/questions/10129069/invalid-argument-error-with-slickgrid *@
    var grids = $('.slick'); //@* I add the class 'slick' to each grid *@
    jQuery.each(grids, function(i, val) {
        var grid = $(this).data('slickgrid');
        grid.destroy();
        });
}

use general cleanup function like this:

$.ajax(
{
    url: removeUrl,
    type: "POST",
    success: function (data)
    {
        cleanupSlickGrid();
        $('#myDivId').html(data); 
    }
}