Trouble with Grid refreshing page 1

[BillChappell]

I have a page with radio buttons above my grid, when I select a new database the grid refreshes. Sort of... Well I actually have this working one another page, but for some reason this code fails on my new page. The radio buttons pass a value that my php understands and sends back the right data as JSON. Now my grid still shows the old database info, yet my console logs show the new data source and JSON. and if I page the grid, it shows data from the new page. I'm confused why page one never refreshes when I select a new database.

Code: [Select]



var theDB =  "racdev1";
 var rval = "d";  //inital vakue of radio button
 var $grid;
 
 $(":radio");
// Set the checkbox value on page load to default dev
 $("#d").prop("checked", true);
 
 function loadgrid(){
   
  var dataSource = 'statsData.php?bd='+ rval;
console.log(dataSource);

// used to show what database is being displayed.
   switch(rval){
 
   case  'e':
theDB = "vracqa1";
break;
   
   case  'pro':
theDB = "vracprod1";
break;
 
   default:
theDB = "racdev1";
   }

$.getJSON(dataSource, function(data){

        var obj = {
            width: 700,
            height: 400,
collapsible:false,
            title: "ArcSDE Tables  -  "+ theDB+" - ADMIN_V_SDE_TABLES",
roundCorners: true,
stripeRows: true,
            flexHeight: true,
            flexWidth: true,
        };

        obj.colModel = [
            { title: "SERVER", width: 75,  dataIndx: "1" },
{ title: "Data Set Name", width: 250,  dataIndx: "2" },
{ title: "Type", width: 100,  dataIndx: "3" },           
{ title: "Description", width: 250,  dataIndx: "4" },
{ title: "Date Created", width: 100,  dataIndx: "5" , render:function (ui) {
var cellData = new Date(ui.cellData);
return $.datepicker.formatDate("M d, yy", cellData );
}
},
{ title: "Spatial Reference", width: 200,  dataIndx: "6" }

        ];
       obj.dataModel = {
            data: data,
            location: "local",
            sorting: "local",                               
            sortIndx: "1",
            sortDir: ["up","down"]           
        };
        obj.pageModel = { type: 'local', rPP: 20, rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000]};
var $grid = $("#grid_json").pqGrid(obj).pqGrid("refresh");

   });
 };

 loadgrid();

// Changes the data grid to reflect which radio button is pushed.
function handleClick(myRadio){
rval=myRadio.value;
loadgrid();
};

Any ideas?

[BillChappell]

I finally figured out I should delete the current grid and simply create a new one using the correct data source.

Code: [Select]

function handleClick(myRadio){
             $grid = $("#grid_json").pqGrid( "destroy" );  // Destroys/Deletes the current grid and loadgrid() create the new one.
rval=myRadio.value;
loadgrid();
};