jQuery Grid Plugin - jqGrid

Hello jqgrid experts

I started writing an application using codeigniter as php framework for database access and MVC on the server side an jquery and jqgrid on the client side. 

Last week, I successfully implemented a dynamic web page with a jqgrid by using ajax, json and POST.

To debug, I use firefox, firebug and firephp. I see clearly a post request going to the server and an appropriate answer with the table data in json format. Rendering of the grid is just fine.

But now I want to incorporate things in 2 or more tabs using jquery ui tabs (like in the demo), some of them with a jqgrid, others with forms or just static content.

The first tab should contain the grid and some static content, the other tab a form.

But when switching between tabs, some strange (at least for me) happen.

When I switch to the tab which should contain the grid, I see a post request returning all the data for the jqgrid, immediately followed by a post request with the html page where the grid should be shown. The grid flashes up and is overwritten by the html page.

Something is wrong in the order of execution, but I am stuck and I am sure there is just a simple answer to my question.

Could someone help me out

some javascript:

$(document).ready(function()  {

$("#navmenu").tabs();

$("#navmenu").tabs('add', 'index.php/volunteer/show_list', 'Lijstje1');

$("#navmenu").tabs('add', 'index.php/volunteer/show_form', 'Lijstje2');

$("#navmenu").bind('tabsselect', function(event, ui) {

gridding();

alert(ui.panel);

});

$("#navmenu").tabs('option', 'ajaxOptions', { type: "POST" });

});

function gridding() 

{

// GRID SETUP

$("#volunteer_grid").jqGrid({

/* Basics */

url:'http://localhost/intro_manager.....n',

datatype: "json",

mtype: 'POST',

colNames:['ID','First Name', 'Last Name', 'Email'],

colModel:[ {name:'id',index:'id',hidden:true, width:55},

  {name:'first_name',index:'first_name', sortable: true, width:120},

  {name:'last_name',index:'last_name', width:200},

    {name:'email',index:'email', width:200}

],

rowNum:10,

rowList:[10,20,30],

/*imgpath: gridimgpath, */

pager: $('#volunteer_pager'),

sortname: 'id',

sortorder: 'asc',

caption:"Vrijwilligers lijst",

/* Other */

cellEdit: false,

hidegrid: false,

loadui: 'disable',

shrinkToFit: true,

// viewrecords: true,

height: 300,

altRows: false,

multiselect: false,

scrollRows: true,

loadtext: 'Vrijwilligers ophalen',

}).navGrid('#volunteer_pager',{edit:false,add:false,del:false});

}

the php (codeigniter)

function show_list()

{

echo 'blablabla';

echo  $this->load->view('volunteer_list', '',TRUE);

}

function show_form()

{

echo  $this->load->view('volunteer_form', '',TRUE);

}

// the ajax_volunteers_json just returns the appropriate json data

function ajax_list_volunteers_json() {

$page = $this->input->post('page');  // get the requested page 

$limit = $this->input->post('rows'); // get how many rows we want to have into the grid 

$sidx = $this->input->post('sidx');  // get index row - i.e. user click to sort 

$sord = $this->input->post('sord');  // get the direction 

if(!$sidx) $sidx =1; // connect to the database 

$count = $this->volunteer_model->count_volunteers();

if( $count >0 ) { 

$total_pages = ceil($count/$limit); 

} else { 

$total_pages = 0; 

} 

if ($page > $total_pages) $page=$total_pages; 

$start = $limit*$page - $limit; // do not put $limit*($page - 1) 

$data = $this->volunteer_model->list_volunteers2($limit, $start);

$response->page = $page; 

$response->total = $total_pages; 

$response->records = $count; 

$i=0;

foreach ($data as $row)

{

$response->rows[$i]['id']=$row->id; 

$response->rows[$i]['cell']=array($row->id,$row->first_name,$row->last_name,$row->email);

$i++;

}

echo json_encode($response);

}

the view

<div></div>

<table id="volunteer_grid" class="scroll" cellpadding="0" cellspacing="0">

</table> <div id="volunteer_pager" class="scroll" style="text-align:center;"></div> 

<p><input id="mybutton" type="button" value="Select Columns to view"></p>

<p><div id="mysearch"></div></p>