Is Jquery $(this) broken by jqgrid gridunload method?

javascript, jqgrid, jquery

Solution

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.

Problem

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

Original source