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

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

• javascript
• jquery
• jqgrid

• I don't know if this is contributing, but I'm pretty sure val needs parentheses like switch($(this).val()) – Isaac Fife Commented Apr 4, 2012 at 3:17
• was just a typo - I corrected the question -problem persists -thx – Pete_ch Commented Apr 4, 2012 at 3:19

4 Answers 4

Cleaned up for future readers:

So here's a sort of working fiddle: http://jsfiddle/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/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.

It seems to me that you should just save $(this) in a variable like $this and use it later. The problem is just that inside of

$('#select').change(function(){/*here*/}); // another value of this

so you should do

(function($)
$.fn.myGridFn = function(options) {
    var $this = $(this), selector = $this.selector;

    $this.jqGrid('GridUnload');
    $this = $(selector);    // reset $this value
    ...    

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

Additionally one use typically start the body of plugin with

return this.each( function() { ...

to be sure that your plugin works also in the case of usage like $(".myGridClass").myGridFn(...) where one can have more as one element in wrapped set $(".myGridClass").

This issue stumped and the answer above was right on.

I kept trying to execute the following:

this.jqGrid('GridUnload')
this.('getGridParam'); /* Still returning all the parameters for the grid. */

Instead I did:

var $t = $(this.selector);
$t.jqGrid('GridUnload');
$t = $(this.selector);
$t.jqGrid('getGridParam'); /* Now empty */

I think you should try

$('#select option:selected).val()// gives the value of the selected option.
$('#select option:selected).text()// gives the text of the selected option.

instead of

$(this).val() 

in the parenthesis of switch