Forum
Log In
Home
Topic RSS
04:20
06/02/2010
Offline
Hi All,
My datepicker does not popup. So, I debug by putting in 3 alerts:
alert('ID1' + id)
$('#training').jqGrid('editRow', id, true, pickdates);
alert('ID3: ' + id);
and
alert('ID2: ' + id); inside pickdates function.
Please tell me why alert('ID2' + id) never pops up.
Here is my html codes:
<html>
<head>
<link rel='stylesheet' type='text/css' href='css/theme/redmond/ui.all.css'/>
<link rel="stylesheet" type="text/css" href="css/theme/my-ui.css"/>
<script type='text/javascript' src='js/jquery/jquery-ui.min.js'></script>
<script type='text/javascript' src='js/admin/training/TrainingMgr.js'></script>
</head>
<body>
<table id='training'></table>
<div id='pager'></div>
</body>
</html>
Here is my js codes:
var lastRowId;
$("#training").jqGrid
(
{
url:'index.php?func=trainingmgr&aAction=loadData',
datatype: 'json',
colNames:['Type', 'Title', 'Eff Date', 'Expr Date', 'Href','Status', 'Rec Date', 'Role', 'Notes'],
colModel:[
{name:'Type', index:'Type', width:100, sortable:true, editable:true, edittype:'select', editoptions:{value:'1:Recruitment;2:Transactions;3:IT'}},
{name:'Title', index:'Title', width:150, sortable:true, editable:true},
{name:'EffDate', index:'EffDate', width:70, sortable:true, align:'center', editable:true, sorttype:'date'},
{name:'ExprDate', index:'ExprDate', width:70, align:'center', editable:true, sorttype:'date'},
{name:'Href', index:'Href', width:100, align:'left', editable:true},
{name:'Status', index:'Status', width:50, sortable:true, align:'left', editable:true},
{name:'RecDate', index:'RecDate', width:70, align:'center', editable:true, sorttype:'date'},
{name:'Role', index:'Role', width:80, align:'left', editable:true},
{name:'Note', index:'Note', width:50, align:'left', resizable:false, editable:true}
],
onSelectRow: function(id)
{
if(id && id !== lastRowId)
{
//Switch the editable interface off for the last row
$('#training').jqGrid('restoreRow', lastRowId);
$("#training").jqGrid('setSelection', lastRowId);
//Switch editable interface on for current row
$('#training').jqGrid('editRow', id, true);
alert('ID1: ' + id);
$('#training').jqGrid('editRow', id, true, pickdates);
alert('ID3: ' + id);
lastRowId = id;
}
},
rowNum:10,
rownumbers: true,
rowList:[10,20,30],
pager: '#pager',
sortname: 'Type',
viewrecords: true,
sortorder: 'asc',
multiselect: true,
autowidth: true,
editurl: "index.php",
caption:'Training Manager'
}
);
$("#training").jqGrid('navGrid','#pager',{edit:true, add:true, del:true});
$("#training").jqGrid('gridResize',{minWidth:550, maxWidth:800, minHeight:80, maxHeight:350});
function pickdates(id)
{
alert('ID2: ' + id);
$('#' + id + '_EffDate', '#training').datepicker({dateFormat:'yy-mm-dd'});
$('#' + id + '_ExprDate', '#training').datepicker({dateFormat:'yy-mm-dd'});
$('#' + id + '_RecDate', '#training').datepicker({dateFormat:'yy-mm-dd'});
}
06:15
06/02/2010
Offline
All,
I finally figured it out. My and my stupid had two lines of editRow like below. Don't ask me why.
$('#training').jqGrid('editRow', id, true);
$('#training').jqGrid('editRow', id, true, pickdates);
it's smart enough not to execute the second line. After taking the first line out, the datepicker appears under the form. I had to do this:
<head>
<style>
.ui-datepicker { z-index:2000; font-size: 0.6em;}
</style>
</head>
to bring the it to the front.
Just want to put it here in case somebody runs into it.
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
