I have created multiple jQGrids on the same page using jqueryUI tabs. The data loads fine on both tabs (click on tab 2 first - since I’m not loading data on page load initially).
Anyway, to recreate the problem I am experiencing download the code below and do the following:
1.) Click on “Tab 2”
2.) Click on any search operation (“==”) and notice that the other list of search operations come up.
3.) Click on “Tab 1”
4.) Click on any search operation (“==”) and notice that the other list of search operations come up.
5.) Click back on “Tab 2”
6.) Click on any search operation (“==”) on any column EXCEPT for the 1st column (“serial”). Now the search operation window showing the other search operations does NOT pop up and I get the following javascript error in the file jquery.jqGrid.src.js:
Line: 4156 Error: Unable to get property 'searchoptions' of undefined or null reference
This is the exact line of code the error is on of this file: http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.2/js/jquery.jqGrid.src.js
What is strange is that the operations ONLY work for the columns that have the same NAMES across all tabs. Notice that clicking on the search operation (“==”) ONLY on the 1st column (e.g. “serial”) will WORK on both tabs, no matter how often you switch between the tabs. But the rest of the search options do not work on tab 2 when you click on them - you receive no popup listing the other search operations, and will get the JS error noted above.
Here is the Fiddle.
Or if you prefer, here is the complete working code to test this issue:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demonstration how to mark some cells as non-editable based on grid content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.2/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.2/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.5.2/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function () {
var initGrids = [false, false];
$('#tabs').tabs({
activate: function (event, ui) {
if (ui.newTab.index() == 0 && initGrids[ui.newTab.index()] == false) {
var mydata = [
{ id: "1", type: "2007-10-01", origin: "test", subtype: "note", refreshdate: "200.00" }
];
jQuery("#list1").jqGrid({
data: mydata,
datatype: 'local',
mtype: 'GET',
colNames: ['serial', 'type', 'origin', 'subtype', 'refreshdate'],
colModel: [
{ name: 'id', index: 'id', width: 55, sorttype: 'integer', search:true, searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'type', index: 'type', width: 90, sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'origin', index: 'origin', width: 80, align: 'right', sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'subtype', index: 'subtype', width: 80, align: 'right', sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'refreshdate', index: 'refreshdate', width: 80, align: 'right', sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } }
],
pager: '#pager1',
rowNum: 10,
rowlist: [10, 20, 30],
sortname: 'id', // NOT 'serial',
sortorder: 'desc',
viewrecords: true,
searchOperators: true,
caption: 'CPE Items',
width: 950
});
jQuery("#list1").jqGrid('filterToolbar', { searchOperators: true, stringResult: true, searchOnEnter: false });
initGrids[ui.newTab.index()] = true;
}
else if (ui.newTab.index() == 1 && initGrids[ui.newTab.index()] == false) {
var mydata = [
{ id: "1", Date: "2007-10-01", System: "test", Status: "note", Technician: "200.00", Timeframe: "3" }
];
$("#list").jqGrid({
data: mydata,
datatype: 'local',
mtype: 'GET',
colNames: ['serial', 'Date', 'System', 'Status', 'Technician', 'Timeframe'],
colModel: [
{ name: 'id', index: 'id', width: 75, sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'Date', index: 'date', width: 90, sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'System', index: 'wsystem', width: 80, align: 'right', sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'Status', index: 'status', width: 80, align: 'right', sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'Technician', index: 'wname', width: 80, align: 'right', sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } },
{ name: 'Timeframe', index: 'time', width: 80, align: 'right', sorttype: 'integer', searchoptions: { sopt: ['eq', 'ne', 'ge', 'gt', 'le', 'lt'] } }
],
pager: '#pager',
rowNum: 10,
rowList: [10, 20, 30],
sortname: 'id', // NOT 'jobno' or 'Job Number'
sortorder: 'desc',
viewrecords: true,
searchOperators: true,
caption: 'Work Orders',
width: 950,
onSelectRow: function (id) {
//var d;
if (id) {
alert(id);
//??? onclick = openbox('Edit Work Order', 1);
//??? d = "jobno=" + id;
$.ajax({
url: 'fillwo.php',
type: 'POST',
dataType: 'json',
data: { jobno: id },
success: function (data) {
var id;
for (id in data) {
if (data.hasOwnProperty(id)) {
$(id).val(data[id]);
}
}
}
});
$("button, input:submit").button();
}
jQuery('#list').editRow(id, true);
}
});
jQuery("#list").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false }).jqGrid('filterToolbar', { searchOperators: true, stringResult: true, searchOnEnter: false });
initGrids[ui.newTab.index()] = true;
}
else if (ui.newTab.index() === 2) {
alert('tab2');
}
}
});
});
//]]>
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab1</a></li>
<li><a href="#tabs-2">Tab2</a></li>
<li><a href="#tabs-3">Tab3</a></li>
</ul>
<div id="tabs-1">
<table id="list1"><tr><td/></tr></table>
<div id="pager1"></div>
</div>
<div id="tabs-2">
<table id="list"><tr><td/></tr></table>
<div id="pager"></div>
</div>
<div id="tabs-3">
<p>Bla bla</p>
</div>
</div>
</body>
</html>
This issue has been driving me up the wall! Can anyone help? Thanks!