Forum
Log In
Home
Topic RSS
Related Topics
18:49
25/06/2011
Offline
Please have a look at my code, I have been round so many times I am going crazy. I know that I have a stupid mistake in there somewhere. The javascript executes for the datepicker as the page is loading, I have tracked it via Firebug, but clicking on the date on the edit page does nothing.
<link rel="stylesheet" type="text/css" href="../css/ui-lightness/jquery-ui-1.7.1.custom.css" />
<link rel="stylesheet" type="text/css" href="../css/ui.jqgrid.css" />
<script src="../js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="../js/grid.locale-en.js" type="text/javascript"></script>
<script src="../js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="../js/jquery.datePicker.js" type="text/javascript"></script>
<script src="../js/date.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function () {
$('#list').jqGrid({
url:'getdata2a.php',
datatype: 'xml',
mtype: 'GET',
colNames:['ID', 'Surname', 'MyDate'],
colModel :[
{name:'ID', index:'ID', width:55},
{name:'Surname', index:'Surname', width:90, editable: true},
{name:'MyDate', index:'MyDate', width:70, editable:true,
editoptions: {
size: 8, maxlength: 10,
dataInit: function(el) {
$(el).datePicker({dateFormat: 'dd-mm-yyyy'})
}
}
}
],
rowNum:10,
rowList:[5,10,20],
editurl: 'editdata.php',
pager: '#pager',
sortname: 'cliID',
viewrecords: true,
sortorder: 'asc',
caption: '',
height: '100%'
}).jqGrid('navGrid','#pager',{add:true,edit:true,del:true, width:'500px'},
{
recreateForm: true
}
);
});
function liveFmatter(el, cellval, opts ) {
if (el==1) {return 'Y'} else {return ''};
}
//]]>
</script>
</head>
<body>
<center>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</center>
</body>
</head>
<body>
<center>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</center>
</body>
I am no longer sure if liveFmatter() should be in or not, but whether in or out, the datepicker doesn't appear.
19:43
Moderators
30/10/2007
Offline
Hello,
The below text is from documentation about the dataInit
Note: Some plugins require the position of the element in the DOM and since this event is raised before inserting the element into the DOM you can use a setTimeout function to accomplish the desired action. This is especially valid for jQuery UI datepicker
In order to work the datepicer (timepicker, colorpicker) you should do
colModel :[
{name:'ID', index:'ID', width:55},
{name:'Surname', index:'Surname', width:90, editable: true},
{name:'MyDate', index:'MyDate', width:70, editable:true,
editoptions: {
size: 8, maxlength: 10,
dataInit: function(el) {
setTimeout( function() { $(el).datePicker({dateFormat: 'dd-mm-yyyy'});}, 200);
}
}
}
],
Please let me know if the avove code work.
Kind Regards
Tony
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.
01:07
28/07/2011
Offline
Just to let you know, Tony, I have this working fine with 4.1.2. (It's slow, because I'm doing a linear search of almost 13 million records, but that's not jqGrid's fault.)
Thank you for the code, and thank you for jqGrid. I'm still learning more about it every day, but there's always something new to learn about such a complex toy.
BTW, in trying to get the search window to do a search by pressing Enter, I seem to have found that ui-reset and ui-search are reversed somehow. ($(".ui-reset").click(); does a search. $(".ui-search").click(); resets.)
Most Users Ever Online: 715
Currently Online:
72 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
