Forum


10:44

22/10/2009

Hi, i need to display an editable date on jqgrid, but firebug throw me this error: "uncaught exception: Missing instance data for this datepicker" I read that it's an id problem, but i don't know how to solve :S The problem is when the user clicks on the day, with the keyboard works fine. This is the code, if it helps:
<style>
.ui-datepicker {z-index:1200;}
</style>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery("#list_convicts").jqGrid(
{
url:'../cgi-bin/jqgrid/jqgrid.cgi?t=4',
datatype: 'json',
width: 800,
imgpath: 'css/images/jqgrid/ui-darkness',
colNames: ['Name', 'Surname', 'Id', 'Cell', 'Entry Date', 'Exit Date', 'Birth Date', 'Notes', 'Taken Photo'],
colModel: [
{name: 'Name', index: 'Name', width: 250, align: 'center', sortable: false, editable: true},
{name: 'Surname', index: 'Surname', width: 250, hidden: true, align: 'center', sortable: false, editable: true},
{name: 'ID', index: 'Id_Convicts', width: 250, align: 'center', sortable: false, editable: true},
{name: 'Cell', index: 'Cell', width: 250, align: 'center', sortable: false, editable: true},
{name: 'Entry Date', index: 'Entry_Date', width: 250, editable:true,
editoptions:{size:12, dataInit:function(el){
$(el).datepicker({dateFormat:'yy-mm-dd'});
},
},
},
{name: 'Exit Date', index: 'Exit_Date', width: 250, editable:true,
editoptions:{size:12, dataInit:function(el1){
$(el1).datepicker({dateFormat:'yy-mm-dd'});
},
},
},
{name: 'Birth Date', index: 'Birth_Date', width: 250, editable:true,
editoptions:{size:12, dataInit:function(el2){
$(el2).datepicker({dateFormat:'yy-mm-dd'});
},
},
},
{name: 'Notes', index: 'Notes', width: 250, align: 'center', sortable: false, editable: true},
{name: 'Taken Photo', index: 'Taken_Photo', width: 250, align: 'center', sortable: false, editable: false, formatter: 'showlink', formatoptions: {baseLinkUrl: '/cgi-bin/take_photo.cgi'}}
],
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id"
},
savekey: true,
pager: jQuery('#pager_convicts'),
rowNum: 10,
rowList: [10, 20, 30],
viewrecords: true,
editurl: '../cgi-bin/jqgrid/jqgrid_edit_convicts.cgi',
caption: 'SISP-UCE Configurator'
}
).navGrid("#pager_convicts",{view:false, search:false, refresh:false},
{recreateForm: true, closeAfterEdit: true, savekey: [true, 13], mtype: 'GET'},
{recreateForm: true, closeAfterAdd: true, savekey: [true, 13], mtype: 'GET'},
{recreateForm: true, closeAfterDel: true, savekey: [true, 13], mtype: 'GET'}
);
}
);
</script>
15:54

Moderators
30/10/2007

Hello,
Not sure but the problem is discussed. The problem is that on dataInit function the element is not in the DOM, but before some days I found elegant solution to call the datapicker in editing modules.
Construct your dataInit the following way
dataInit: function (el)
{
setTimeout(function()
{
$(el).datepicker();
},
10);
}
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
83 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66