I'm trying to learn jqGrid and i have some annoying problem which i can't figure it out. I'm using Navigation Grid for add, edit and deleting data. The problem is, i can add,edit or delete datas from the web. But the changes won't be applied for my server. So for example if i edit the first row it changes in my Nav Grid but then if i reload the page, its there again.
NavGridHTML.html
<!DOCTYPE html>
<html>
<head>
<title>Navigation Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui.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.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
jQuery("#navgrid").jqGrid({
url: "GridPHP.php",
editurl:"GridEditPHP.php",
datatype: "json",
mtype: "GET",
//cellEdit: true,
//cellsubmit: "remote",
//cellurl: "GridEditPHP.php",
colNames: ["Film ID","Title","Description","Length","Rating"],
colModel: [
{ name: "film_id", index: "film_id", width: 40, editable: false, editoptions: {readonly:true,size: 10}},
{ name: "title", index: "title", width: 180, editable:true, editoptions: {size: 10}},
{ name: "description", index: "description", width: 700, sortable: false, editable:true, edittype: "textarea", editoptions: {rows:"3", cols:"30"}},
{ name: "length", index: "length", width: 50, align: "right", editable:true, editoptions: {size: 10}},
{ name: "rating", index: "rating", width: 70, align: "right", editable:true, editoptions: {size: 10}}
],
pager: "#pagernav",
rowNum: 10,
rowList: [10,20,30],
sortname: "film_id",
sortorder: "asc",
viewrecords: true,
//gridview: true,
//autoencode: true,
caption: "Navigation Table"
// height: 210
});
jQuery("#navgrid").jqGrid('navGrid','#pagernav',
{edit:true,add:true,del:true, search: false, view: true}, // options
{height: 280, reloadAfterSubmit:false, recreateForm: true, closeAfterEdit: true, editCaption: "The Edit Dialog", saveData: "Data has been changed! Save changes?", closeOnEscape: true}, // edit options
{height: 280, reloadAfterSubmit:false, recreateForm: true, closeAfterAdd: true, closeOnEscape: true}, // add options
{reloadAfterSubmit:false, closeOnEscape: true}, // del options
{}, // search options
{closeOnEscape: true}
);
});
</script>
</head>
<body>
<table id="navgrid"><tr><td></td></tr></table>
<div id="pagernav"></div>
</body>
</html>
GridPHP.php
<?php
include("GridCONFIG.php");
$page = $_REQUEST["page"];
$limit = $_REQUEST["rows"];
$sidx = $_REQUEST["sidx"];
$sord = $_REQUEST["sord"];
if (!$sidx) $sidx = 1;
$totalrows = isset($_REQUEST["totalrows"]) ? $_REQUEST["totalrows"]: false;
if($totalrows) {
$limit = $totalrows;
}
$db =mysqli_connect($host, $username, $password, $database) or die ("Connection Error: " . mysqli_error($db));
mysqli_select_db($db,$database) or die ("Error connecting to db!");
$result = mysqli_query($db,"SELECT COUNT(*) AS count FROM film");
$row = mysqli_fetch_array($result,MYSQLI_ASSOC);
$count = $row['count'];
if ($count > 0 ) {
$var = @($count/$limit);
$totalpages = ceil ($var);
} else {
$totalpages = 0;
}
if ($page > $totalpages) $page=$totalpages;
if ($limit < 0) $limit = 0;
$start = $limit*$page - $limit;
if ($start < 0) $start = 0;
$sql = "SELECT film_id, title, description, length, rating FROM film ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysqli_query($db,$sql) or die ("Couldn't execute query! ".mysqli_error($db));
$responce = new \stdClass();
$responce -> success = false;
$responce -> page = $page;
$responce -> total = $totalpages;
$responce -> records = $count;
$i = 0;
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
$responce -> rows[$i]["id"] = $row["film_id"];
$responce -> rows[$i]['cell'] = array($row["film_id"],$row["title"],$row["description"],$row["length"],$row["rating"]);
$i++;
}
echo json_encode($responce);
mysqli_close($db);
?>
GridEditPHP.php
<?php
include("GridCONFIG.php");
$db =mysqli_connect($host, $username, $password, $database) or die ("Connection Error: " . mysqli_error($db));
mysqli_select_db($db,$database) or die ("Error connecting to db.");
$filmid = $_POST["film_id"];
$title = $_POST["title"];
$description = $_POST["description"];
$length = $_POST["length"];
$rating = $_POST["rating"];
//switch($_REQUEST["oper"]) {
//
// case "add":
// $sql = "INSERT INTO film (film_id,title,description,length,rating) VALUES ($filmid,$title,$description,$length,$rating)";
// mysqli_query($db, $sql);
// break;
//
// case "edit":
// $sql = "UPDATE film SET film_id=$filmid, title=$title, description=$description, length=$length, rating=$rating";
// mysqli_query($db, $sql);
// break;
//
// case "del":
// $sql = "DELETE FROM film";
// mysqli_query($db, $sql);
// break;
echo "TEST!!!";
if($_REQUEST["oper"]=='add') {
$sql = "INSERT INTO film (film_id,title,description,length,rating) VALUES ($filmid,$title,$description,$length,$rating)";
if(mysqli_query($db, $sql)) {
echo "Film added.";
} else {
echo "Error adding film: " .mysqli_error($db);
}
} elseif($_REQUEST["oper"]=='edit') {
$sql = "UPDATE film SET title=$title, description=$description, length=$length, rating=$rating WHERE film_id=$filmid";
if(mysqli_query($db, $sql)) {
echo "Film edited.";
} else {
echo "Error editing film: " .mysqli_error($db);
}
} elseif($_POST["oper"]=='del') {
$sql = "DELETE FROM film WHERE film_id=$filmid";
if(mysqli_query($db, $sql)) {
echo "Film deleted.";
} else {
echo "Error deleting film: " .mysqli_error($db);
}
}
mysqli_close($db);
?>
I would be appreciated if someone can solve this annoying problem... And just for info, i already read Documentation, and looked every single example or solution on the internet. But still couldn't find any solution.
And one additional question: How can i see the output from GridEditPHP.php echo "TEST!!!";...
I mean, where can i see it on my website?
The Database is sample database called "sakila".
