Using jqGrid 4.13.3 - free jqGrid
In the Add form I have one static input element and one select list element. I use dataEvents in the beforeInitData to bind a keyup ajax function to the input element. After the Add form displays I type in a value in the static element. The ajax callback function returns a string formatted as a select list.
I am trying to use this code to populate the select list but it never populates.
function faiLogDocumentItemListResults(wResults){
if(wResults.validItemList){
$("#ifailocloglist").setColProp('item', { editoptions: { value: wResults.itemSelectList}});
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
}
}
Update to Add full code:
$(document).ready(function(){
var cName = "";
var selID = "";
var temp = "";
var sourcevalue = "";
var addFormId = "";
var requestedchangelink = "";
$("#ifailocloglist").jqGrid({
url:'/QMSWebApp/FirstArticleLocationLogV8ControllerServlet?lifecycle=failogbodydataload',
editurl:'/QMSWebApp/FirstArticleLocationLogV8ControllerServlet?lifecycle=failogbodydataedit',
datatype: "json",
height: "auto",
colNames:['Badge#','Index#','PriorityIndex','Priority','Delete Request','Location','Document#','Due Date','Part#','Planner#','Airline','Log Data','Inspector','FAI Started','FAI Finished','Comments','Status','IFlag'],
colModel:[
{name:'badgeno', index:'badgeno', width:50, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:1, colpos:1,label:"Badge#:"}},
{name:'id', index:'id', width:100, hidden: false, editable: true, editoptions:{ disabled:'disabled'}, editrules:{edithidden:true}, formoptions:{rowpos:2, colpos:1,label:"Index#:"}},
{name:'priority', index:'priority', width:50, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:3, colpos:1,label:"Priority:"}, edittype: "select", editoptions: { size: 1}},
{name:'priorityicon', index:'priorityicon', width:50},
{name:'requesttodelete', index:'requesttodelete', width:50, hidden: true, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:4, colpos:1,label:"Delete Request:"}, edittype: "select", editoptions: { size: 1}},
{name:'location', index:'location', width:50, hidden: false, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:5, colpos:1,label:"Location:"}, edittype: "select", editoptions: { size: 1}},
{name:'documentNumber', index:'documentNumber', width:50, hidden: false, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:6, colpos:1,label:"Document#:", elmsuffix: " type in Document# and press 'Enter' key"}},
{name:'duedate', index:'duedate', width:50, hidden: false},
{name:'item', index:'item', width:100, hidden: false, editable: true, editrules:{edithidden:true}, formoptions:{rowpos:8, colpos:1,label:"Item:"}, edittype: "select", editoptions: { size: 1}},
{name:'planner', index:'planner', width:50, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'airline', index:'airline', width:50, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'logdata', index:'logdata', width:75, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'inspector', index:'inspector', width:75, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'startdate', index:'startdate', width:100, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'finishdate', index:'finishdate', width:100, hidden: false, editable: false, editrules:{edithidden:false}},
{name:'comment', index:'comment', width: 250, hidden: false, editable: true, editrules:{edithidden:true}, edittype:'textarea',editoptions:{rows:'3',cols:'50'}, formoptions:{rowpos:15, colpos:1,label:"Comments:"}},
{name:'faistatus', index:'faistatus', width:1, hidden: true, editable: false, editrules:{edithidden:false}},
{name:'initializedflag', index:'initializedflag', width:1, hidden: true, editable: false, editrules:{edithidden:false}},
],
onSelectRow: oSelect,
rowNum:5,
rowList:[5,10,15,20,25,30],
loadonce: true,
pager: '#ifailocloglistpager',
viewrecords: true,
gridview: true,
userdata: "userdata",
rowattr: colorrow,
loadComplete: lComplete,
reloadAfterSubmit: true,
caption:"First Article Location Log"
});
$("#ifailocloglist").jqGrid('navGrid','#ifailocloglistpager',
{edit:true,add:true,del:true,search:true,view:false,
beforeRefresh: function(){
$(this).jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
}},
{url:'/QMSWebApp/FirstArticleLocationLogV8ControllerServlet?lifecycle=failogbodydataedit',
recreateForm: true,
width: 700,
beforeShowForm: bsForm,
viewPagerButtons: false,
checkOnSubmit: true,
zIndex: 500200},
{recreateForm: true,
width: 700,
beforeShowForm: absForm,
beforeInitData: biAddForm,
afterShowForm: asForm,
afterComplete: afComp,
beforeSubmit: bsubForm,
afterSubmit: afSubmit,
zIndex: 500200},
{zIndex: 500200},
{zIndex: 500200},
{recreateForm: true,
width: 700,
viewPagerButtons: false
}
);
$("#ifailocloglist").setGridWidth(gridouterwidth);
function lComplete(data){
$('.faiLocationLog-error-msg').load("/QMSWebApp/GenericControllerServlet",
{lifecycle:"errorMessageDisplay"});
$('.faiLocationLog-error-msg span').text($("#ifailocloglist").getGridParam('userData').elapsedtime);
hideProgressDisplay();
};
function colorrow(rd){
switch(rd.faistatus){
case 1:
return {"class": "greenBGrow1"};
break;
case 2:
return {"class": "redBGrow1"};
break;
default:
if(rd.initializedflag){
return {"class": "yellowBGrow1"};
}
break;
}
};
function oSelect(id){
$("#ifailocloglist").setColProp('priority', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=failocationlogpriorityoptionslist'}});
$("#ifailocloglist").setColProp('requesttodelete', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=twowayoptionlist'}});
$("#ifailocloglist").setColProp('location', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=failocationlogoptionslist'}});
};
function bsForm(formId){
$('#tr_documentNumber',formId).hide();
$('#tr_badgeno',formId).hide();
$('#tr_duedate',formId).hide();
};
function absForm(formId){
$('#tr_priority',formId).hide();
$('#tr_id',formId).hide();
$('#tr_requesttodelete',formId).hide();
$('#tr_duedate',formId).hide();
$('#tr_item',formId).hide();
$('#tr_comment',formId).hide();
//$('#tr_badgeno',formId).addClass("badgeenter");
//$('#tr_documentNumber',formId).addClass("docenter");
$('#badgeno',formId).val($('#savebadgenov').val());
//$('.badgeenter').on("keyup", function(){
//if(event.keyCode=='13'){
//$('#documentNumber',formId).focus();
//}
//});
//$('.docenter').on("keyup", function(){
//if(event.keyCode=='13'){
//$("#sData").click();
//}
//});
};
function biAddForm(formId){
addFormId = formId;
$("#ifailocloglist").setColProp('location', { editoptions: { dataUrl: '/QMSWebApp/GenericControllerServlet?lifecycle=failocationlogoptionslist'}, defaultValue: 0});
$("#ifailocloglist").setColProp('documentNumber', { editoptions: {dataEvents: [{ type: 'keyup', fn: function(e) {if(event.keyCode=='13'){getDocumentItemList(this.value); }}}]}});
};
function getDocumentItemList(wValue){
$.post("/QMSWebApp/FirstArticleLocationLogV8ControllerServlet",
{lifecycle:"faiLogDocumentItemList",
documentNumber:wValue}, faiLogDocumentItemListResults, 'json');
}
function faiLogDocumentItemListResults(wResults){
var cm = $('#ifailocloglist').jqGrid('getColProp','item');
if(wResults.validItemList){
cm.edittype = "select";
cm.editoptions = { size: 1};
setTimeout(function(){
$('#tr_item select').html(wResults.itemSelectList);
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
},500);
}
else{
cm.edittype = "text";
cm.editoptions = { size: 20};
setTimeout(function(){
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
},500);
}
}
function asForm(formId){
//if($('#badgeno').val() != ""){
//$('#documentNumber',formId).focus();
//}
//else{
//$('#badgeno',formId).focus();
//}
};
function bsubForm(postdata, formid){
$('#savebadgenov').val($('#badgeno').val());
$('#savelocv').val($('#location').val());
if($('#badgeno').val() == ""){
return [false,"ATTENTION - Record was not saved. Badge# field is blank."];
}
else if($('#location').val() == ""){
return [false,"ATTENTION - Record was not saved. Location field is blank."];
}
else if($('#documentNumber').val() == 0){
return [false,"ATTENTION - Record was not saved. MO/PO field is blank."];
}
else{
return [true,"Ok"];
}
};
function afComp(response,postdata,formID){
$('#badgeno',formID).val($('#savebadgenov').val());
$('#location',formID).val($('#savelocv').val());
$('#documentNumber',formID).focus();
}
function afSubmit(response, postdata) {
var res = $.parseJSON(response.responseText);
if(res){
if(res.errorCode == "BadgeFailure"){
return [false,"Your badge number could not be validated."];
}
else if(res.errorCode == "DocFailure"){
return [false,"Document# could not be validated."];
}
else{
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true,"Ok"];
}
}
else{
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true,"Ok"];
}
//return [true];
}
$('.ifaiappenddialog').click(function(){
});
$('.failocationlogPrint').on("click", function(){
$.post("/QMSWebApp/FirstArticleLocationLogV8ControllerServlet",
{lifecycle:"printfialocationlogqueue"}, exportDisplayResults, 'json');
});
This will not work. The change of edittype is on next open of add form. It is needed not only to change edittype, but to change physically the input field from text to select and vice versa. The below code works on my end. I hope you will got the point
function faiLogDocumentItemListResults(wResults){
var cm = $('#ifailocloglist').jqGrid('getColProp','item');
if(wResults.validItemList){
//create a clone from another select
var test = $("#location").clone();
test.attr({id:"dummy",size:1}).html("");
// initialize the new remove the old and place the new
$("#item").after(test).remove();
test.attr("id","item");
cm.edittype = "select";
cm.editoptions = { size: 1};
setTimeout(function(){
$('#tr_item select').html(wResults.itemSelectList);
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
},500);
}
else{
// see the comments above
var test = $("#documentNumber").clone();
test.attr({id:"dummy",size:20}).val("");
$("#item").after(test).remove();
test.attr("id","item");
// now change it in colModel
cm.edittype = "text";
cm.editoptions = { size: 20};
setTimeout(function(){
$('#tr_item',addFormId).show();
$('#tr_comment',addFormId).show();
},500);
}
}
Hope this help you.