Forum


20:04

14/10/2010

This is the first time I am using jqGrid and I am a novice at jQuery. I started with the template at
http://suddendevelopment.com/?p=38
and added
closeAfterAdd: true
and
closeAfterEdit: true
but it still doesn't do what I want. I am not sure if I have added these lines correctly -- e.g., in the right place.
Cell editing and grouping is not working for me yet so those parts are commented out for now. I want to get this Submit issue out of the way first if I can.
Thanks!
jQuery(document).ready(function(){
jQuery("#htmlTable").jqGrid({
url:'jqGridCrud.php',
editurl:'jqGridCrud.php',
closeAfterAdd:true,
closeAfterEdit:true,
datatype:'json',
mtype:'POST',
colNames:[
'id'
,'Date'
,'Loc'
,'Name'
,'Phone'
,'Major'
],
colModel:[{
name:'id'
,index:'id'
,width:35
},{
name:'piddate'
,index:'piddate'
,width:100
,sorttype:'date'
,datefmt:'Y-m-d'
,align:'left'
,editable:true
},{
name:'loc'
,index:'loc'
,width:35
,align:'left'
,editable:true
},{
name:'name1'
,index:'name1'
,width:140
,align:'left'
,editable:true
},{
name:'phone'
,index:'phone'
,width:100
,align:'left'
,editable:true
},{
name:'major'
,index:'major'
,width:150
,align:'left'
,editable:true
}],
pager:jQuery('#htmlPager'),
rowNum:10,
rowList:[10,20,30],
sortname:'loc',
sortorder:'asc',
/*
cellEdit:true,
cellsubmit:'remote',
afterEditCell:function(id,name,val,iRow,iCol){
if( name == 'piddate' ){
jQuery('piddate','#celltbl').datepicker({dateFormat:'yyyy-mm-dd'});
}
},
*/
viewrecords:true,
imgpath:'themes/basic/images',
/*
grouping:true,
groupingView:{
groupField:['loc']
,groupColumnShow:[false]
,groupDataSorted:true
},
*/
caption:'Example jqGrid, With standard Navigation and editing',
/* These are custom vars sent on each READ, or SELECT request */
postData:{
customVar1:'customVal1'
,customVar2:'customVal2'
}
}).navGrid('#htmlPager');
/* THIS is what we do when someone clicks the form submit button */
jQuery('#btnSubmit').click(function(){
jQuery.post('jqGridCrud.php',{
/* you can put whatever you need to send to the server here, there are easier ways to just serialize the form and send it, but this way is more versatile */
oper:'edit'
},function(){
},'json');
});
});/* end of on ready event */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/j/jquery-1.4.2.min.js"></script><!-- jQuery http://jquery.com -->
<script type="text/javascript" src="/script/jqgrid/src/i18n/grid.locale-en.js"></script><!-- language file required by jqgrid -->
<script type="text/javascript" src="js/jqDnR.js"></script><!-- Required for auto generated forms in nav bar -->
<script type="text/javascript" src="js/jqModal.js"></script><!-- Required for auto generated forms in nav bar -->
<script type="text/javascript" src="jquery.jqGrid.js"></script><!-- jqGrid http://www.trirand.com/blog/ -->
<script type="text/javascript" src="index.js"></script><!-- specific js for this page. -->
<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" /><!-- jqModal css -->
<link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" /> <!-- jqgrid theme -->
<link rel="stylesheet" type="text/css" media="screen" href="local.css" />
</head>
<body>
<table id="htmlTable" class="scroll"></table>
<div id="htmlPager" class="scroll"></div>
</body>
</html>
Most Users Ever Online: 715
Currently Online:
69 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