Question

I expect the following code to unload a javascipt jqgrid, then load another grid with different options, including different columns

//onload
(function($)
$.fn.myGridFn = function(options){
   $(this).jqGrid('GridUnload');
   $(this).jqGrid(options.gridoptions);


//....

$('#select').change(function(){ 
    switch($(this).val())
    {
      case 'grid1':
            $('#grid').myGridFn({gridoptions:{/*grid1 options*/}});
            break;
      case 'grid2':
            $('#grid').myGridFn({gridoptions:{/*grid2 options*/}});
            break;
    }
   });


})(jQuery);

//...
<table id="grid"></table>

What I get is the grid unloading, then I have to change the selection in the select element and back again to load the new grid.

Updated:
If I replace the $(this) in the plugin with the actual element selector $(‘#grid’) – it works just fine, I cant do this in my real app because the plugin is used by several other table elements and grids

Answer 1

Cleaned up for future readers:

So here’s a sort of working fiddle: http://jsfiddle.net/s3MsW/10/

I say “sort of” because the underlying code is suspect (jqGrid itself). But we’ll get there in a moment… first thing: if you log “this” for the plugin, it’s actually the jQuery object, not the node. Theoretically we can replace $(this) in your original code with this and all should work.

Except not.

You can in fact use this to unload the Grid, but then the function leaves this as a reference that does not point to the table on the rendered page. There are ways to show that the old node is still around ( http://jsfiddle.net/s3MsW/8 was a test ) but suffice it to say it can no longer be used to render a new table to the page proper.

There’s no real choice except to cache the selector string and re-select the clean table (ie. create a new jQuery object) from scratch:

$.fn.myGridFn = function(options){
   var theId = this.selector;
   this.jqGrid('GridUnload'); // reference works for now
   $(theId).jqGrid(options); // reference is broken, so re-select with cached ID
}

If you’re conscientious about memory usage, you probably want to destroy this (the ghost node), but there’s probably no real harm just keeping it around.