jQuery Grid Plugin - jqGrid

Hey folks,

I got a problem with showing 2 Grids in Internet explorer, I tested it in ie 8 and ie11 with Same result. the first grid is displayed properly, but the second one is missing. Chrome and Firefox are showing both tables.

Here is my configuration. I would appreciate every form of help because i tried to fix this for 2 days and its driving me nuts.

 

[...]

<script type="text/javascript">

$( document ).ready(function() {
$(function(){
console.info("ObjectName1: ", test);
$('#genDataTable1').assGrid({
basepath: '<%= request.getContextPath() %>',
objectName: '<%= task.getGenTable1Typ() %>',
caption: '<%= task.getGenTable1Typ() %>',
massnahmeNummer: '<%= task.getMassnahmeNummer() %>',
pager: '#pager1'
});
});

$(function(){
$('#genDataTable2').assGrid({
basepath: '<%= request.getContextPath() %>',
objectName: '<%= task.getGenTable2Typ() %>',
caption: '<%= task.getGenTable2Typ() %>',
massnahmeNummer: '<%= task.getMassnahmeNummer() %>',
pager: '#pager2'
});
});
});
</script>

[...]

<div id="container1">
<table id="genDataTable1">
<tr>
<td></td>
</tr>
</table>
<div id="pager1"></div>
</div>

 

<!-- GenDataTable 2 mit REST-Daten BEGIN -->
<div id="container2">
<table id="genDataTable2">
<tr>
<td></td>
</tr>
</table>
<div id="pager2"></div>
</div>

[...]

JS Config :

(function ( $ ) {
$.fn.assGrid = function(options) {

var basepath = options.basepath;
var massnahmeNummer = options.massnahmeNummer;
var caption = options.caption;
var objectName = options.objectName;

var restBasePath = "/rest/GenDataTable/";
var listSelector = this.selector;
console.log(this.selector);
var restURL = basepath + restBasePath + objectName + "/?massnahme=" + massnahmeNummer;
var grid;

$.get(basepath + restBasePath + objectName + "/definitions", function(data) {
onDefinitionsLoaded(data);
});

var dateEditOptions = {
dataInit: function (elem) {
$(elem).datepicker({
dateFormat: "dd.mm.yy",
firstDay: 1,
prevText: '<zurück', prevStatus: '',
prevJumpText: '<<', prevJumpStatus: '',
nextText: 'Vor>', nextStatus: '',
nextJumpText: '>>', nextJumpStatus: '',
currentText: 'heute', currentStatus: '',
todayText: 'heute', todayStatus: '',
clearText: '-', clearStatus: '',
closeText: 'schließen', closeStatus: '',
monthNames: ['Januar','Februar','März','April','Mai','Juni','Juli','August','September','Oktober','November','Dezember'],
monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'],
dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
});
}
};

function onDefinitionsLoaded(definitions) {
var colNames = new Array();
var colModels = new Array();

var counter = 0;
_.each(definitions, function(def) {
colNames.push(def._columnName);
var colModel = {
name: def._attributeName,
width: def._columnSize == undefined ? 50 : def._columnSize,
editable: def._columnEditable,
hidden: !def._columnViewed
};
if (def._attributeType == "java.util.Date") {
colModel.editoptions = dateEditOptions;
}
if (def._attributeType == "java.lang.Boolean") {
colModel.edittype = 'checkbox';
colModel.formatter = 'checkbox';
colModel.editoptions = { value: "true:false" };
}

if (def._cellEditor == "combo_bearbeitungsstand"
|| def._cellEditor == "combo_bau_kennzeichen"
|| def._cellEditor == "combo_bestellnr"
|| def._cellEditor == "bauunternehmen_editor" ) {
colModel.edittype = 'select';
colModel.formatter = 'select';
colModel.editoptions = { value: def._cellEditorDetails };
colModel.editoptions = { value: 'Test1:test1;TEst2:test2' };
}

if (def._cellEditor == "investor_list_chooser"
|| def._cellEditor == "bau_list_chooser"
|| def._cellEditor == "address_chooser" ) {
colModel.edittype = 'select';
colModel.formatter = 'select';
colModel.editoptions = { value: def._cellEditorDetails };
colModel.editoptions = { value: 'Test3:test3;TEst4:test4' };
}
colModels.push(colModel);
});

grid = $(listSelector).jqGrid({
url: restURL,
ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
datatype: "json",
pager: options.pager,
mtype: "GET",
loadonce: true,
rowNum: 30,
height: 250,
width: 1200,
rowList: [10, 20, 30],
sortname: "invid",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: false,
caption: caption,
colNames: colNames,
colModel: colModels,

'cellEdit': true,
'cellsubmit' : 'remote',
'cellurl': restURL,
'ajaxCellOptions': {
contentType: "application/json",
type: "PUT"
},
serializeCellData : function(postdata) {
var list = $(listSelector);
var selectedRow = postdata.id;
rowData = list.getRowData(selectedRow);

var post = {
Id: rowData['Id']
};

for(var field in postdata){
var value = postdata[field];
if (field != "oper" && field != "id") {
post[field] = value;
}
}
console.log(JSON.stringify(post));
return JSON.stringify(post);
}
});

grid.jqGrid('navGrid', options.pager,
{
search: false,
add: true,
edit: false,
del: true
},
updateDialog('PUT'),
updateDialog('POST'),
updateDialog('DELETE')
);
};

function updateDialog(action) {
return {
url: restURL,
closeAfterAdd: true,
closeAfterEdit: true,
afterShowForm: function (formId) { },
modal: true,
onclickSubmit: function (params, postdata) {
var list = $(listSelector);
var selectedRow = grid.getGridParam("selrow");
rowData = list.getRowData(selectedRow);
if (action != 'POST') { // bei POST-Aufrufen gibt es keine Ressourcen-ID am Ende der URL
params.url += '&Id=' + rowData.Id;
}
params.mtype = action;
},
width: "600",
ajaxEditOptions: {
datatype: "json",
contentType: "application/json; charset=ISO-8859-1"
},
serializeEditData: function(postdata){
if(action == 'POST'){
postdata['id'] = undefined;
delete postdata["oper"];
postdata['MassnahmeNummer'] = massnahmeNummer;
}
return JSON.stringify(postdata);
}
};
};
};
}( jQuery ));

 

Regards