i am trying to create an editable grid with jqgrid - however I cant get the data to save to the database – I know its probably something really simple, but coding is not really my thing – just trying to help out a friend. Here is my latest html. I seem to be going round in circles when i google…
many thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT…..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″ />
<title>xxxxxx</title>
<link rel="stylesheet" type="text/css" href="timesheet_login.css">
<link rel="stylesheet" media="print" href="print.css" type="text/css">
<link rel="shortcut icon" href="oneline_logo.gif">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="scripts/js/jqModal.js" type="text/javascript"></script>
<script src="scripts/js/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#rota").jqGrid({
url:'example.php',
datatype: "json",
mtype: 'POST',
colNames:['Date', 'HPJ', 'Recycler','CCTV','Assistant'],
colModel:[
{name:'date',index:'date', width:90,editable:true},
{name:'hpj',index:'hpj', width:100,editable:true},
{name:'recycler',index:'recycler', width:100,editable:true},
{name:'cctv',index:'cctv', width:100,editable:true},
{name:'assistant',index:'assistant', width:100,editable:true}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pcelltbl',
sortname: 'date',
viewrecords: true,
sortorder: "desc",
caption:"Cell Edit Example",
forceFit : true,
cellEdit: true,
cellsubmit: 'clientArray',
editurl:'example.php?action=save'
});
jQuery("#rota").jqGrid('navGrid','#pgwidth',{edit:false,add:false,del:false});
});
</script>
</head>
<body>
<div id="topcontent">
<br><br>
</div><!– end topcontainer –>
<div id="centercontent">
<table id="rota"><tr><td/></tr></table>
<div id="pager"></div>
<script src="celledit.js" type="text/javascript"> </script>
</div>
<div id="footercontent">
</div><!– end footercontent –>
</body>
</html>
example.php:
<?php
$dbhost = xxxxx.com'; $dbuser = 'xxx'; $dbpassword = 'xxx'; $dbdatabase = xxxx;
$page = $_REQUEST['page']; // get the requested page
$limit = $_REQUEST['rows']; // get how many rows we want to have into the grid
$sidx = $_REQUEST['sidx']; // get index row - i.e. user click to sort
$sord = $_REQUEST['sord']; // get the direction
if(!$sidx) $sidx =1;
// connect to the database
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
mysql_select_db($dbdatabase) or die("Error conecting to db.");
$result = mysql_query("SELECT COUNT(*) AS count FROM rota");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
if($start <0) $start = 0;
$SQL = "SELECT date, hpj, recycler, cctv, assistant FROM rota ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce->rows[] = array('id'=>$row['date'], "cell"=>array($row['date'], $row['hpj'], $row['recycler'], $row['cctv'], $row['assistant']));
}
echo json_encode($responce);
?>
Look at the documentation of the cell editing. You should use cellsubmit: 'remote' and cellurl instead of cellsubmit: 'clientArray'. You need of course write on the server part (referenced by cellurl URL) the code which save the changes in the database. The option editurl defines the URL used for inline and form editing but not for cell editing.