jQuery Grid Plugin - jqGrid - Topic: php+mysql editing problem

drlinux on php+mysql editing problem

Wed, 27 Aug 2008 06:30:18 +0300

ok found the problem. The problem was syntax eror 🙂 sorry... 🙂

jQuery(document).ready(function(){
var lastsel;
jQuery("#rowed3").jqGrid({
       url:'balget.php',
    datatype: "json",
       colNames:['DB Id','Tarih', 'Giren', 'Cikan','Ortalama','Aciklama'],
       colModel:[
           {name:'id',index:'id', width:55},
           {name:'tarih',index:'tarih', width:90, editable:true},
           {name:'giren',index:'giren', width:100, editable:true},
           {name:'cikan',index:'cikan', width:80, align:"right", editable:true},
           {name:'ortalama',index:'ortalama', width:80, align:"right", editable:true},
           {name:'aciklama',index:'aciklama', width:80,align:"right", editable:true},
           ],
       rowNum:10,
       rowList:[10,20,30],
       imgpath: 'themes/basic/images',
       pager: jQuery('#prowed3'),
       sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    onSelectRow: function(id){
        if(id && id!==lastsel){
            jQuery('#rowed3').restoreRow(lastsel);
            jQuery('#rowed3').editRow(id,true);
            lastsel=id;
        }
    },
    editurl: "balget.php",
    caption: "Using events example"
}).navGrid("#prowed3",{edit:false,add:false,del:false});
});

tony on php+mysql editing problem

Wed, 27 Aug 2008 06:23:39 +0300

Ok,

Let consider what you send me.

1. You should include or jquery.jqGrid.js or base.grid.js and grid.inlinedit.js.

IMHO for the first step exlude jquery.jqGrid.js.

2. I do net see the code for edit.php - this file must exists and accept parameters to save the data.

3. This line in colModel has a comma at end and your grid will not work in IE and maybe in FF

...

{name:'aciklama',index:'aciklama', width:80,align:"right",editable:true}, ]

4. Try to alert the id onselectrow event (this happen when you select row

and not when double click.

So I think you will find the solution after that

Regards

Tony

drlinux on php+mysql editing problem

Wed, 27 Aug 2008 06:08:24 +0300

Hello,

Many thanks for your recommends Tony, after your answer i coded again my app. I'm using now JSON method to get datas from MySQL. I coded it step by step. When I don't do editable fields everything successfull… But when i want to do editable fields I get no data, only a white blank page. (Is there any problems with onSelectRow: function area ???) here are my codes what's wrong i can not understand please help me.

Regards,

Ibrahim YILMAZ.

First, HTML file:

var lastsel;
jQuery(”#rowed3″).jqGrid({
       url:'get.php',
    datatype: “json”,
       colNames:['DB Id','Tarih', 'Giren', 'Cikan','Ortalama','Aciklama'],
       colModel:[
           {name:'id',index:'id', width:55},
           {name:'tarih',index:'tarih', width:90, editable:true},
           {name:'giren',index:'giren', width:100,editable:true},
           {name:'cikan',index:'cikan', width:80, align:"right",editable:true},
           {name:'ortalama',index:'ortalama', width:80, align:"right",editable:true},
           {name:'aciklama',index:'aciklama', width:80,align:"right",editable:true},
           ],
       rowNum:10,
       rowList:[10,20,30],
       imgpath: 'themes/basic/images',
       pager: jQuery('#prowed3'),
       sortname: 'id',
    viewrecords: true,
    sortorder: “desc”,
    onSelectRow: function(id){
        if(id && id!==lastsel){
            jQuery('#rowed3').restoreRow(lastsel);
            jQuery('#rowed3').editRow(id,true);
            lastsel=id;
        }
    },
    editurl: “get.php”,
    caption: “Example Table”
}).navGrid(”#prowed3″,{edit:false,add:false,del:false});

</script>

</head>
<body>
<table id=”rowed3″ class=”scroll” cellpadding=”0″ cellspacing=”0″></table>
<div id=”prowed3″ class=”scroll” style=”text-align:center;”></div>
<br />
</body>
</html>

Second the PHP file:

<?php
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1;
// connect to the MySQL database server
$db = mysql_connect(”localhost”, “root”, “password”) or die(”Connection Error: ” .
mysql_error());
// select the database
mysql_select_db(”aquadata”) or die(”Error connecting to db.”);
$result = mysql_query(”SELECT COUNT(*) AS count FROM balik_hareket”);
$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)
$SQL = “SELECT * FROM balik_hareket 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[$i]['id']=$row[id];
    $responce->rows[$i]['cell']=array($row[id],$row[tarih],$row[cikan],$row[giren],$row[ortalama],$row[aciklama]);
    $i++;
}
echo json_encode($responce);
?>

This file working, so I can see my all datas:

<html>
<head>
<title>BalÄ±k Hareket Tablosu</title>
<link rel=”stylesheet” type=”text/css” media=”screen” href=”themes/basic/grid.css” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”themes/jqModal.css” />
<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.jqGrid.js” type=”text/javascript”></script>
<script src=”js/jquery.jqModal.js” type=”text/javascript”></script>
<script src=”js/jquery.jqDnR.js” type=”text/javascript”></script>
<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(”#list”).jqGrid({
    url:'balget.php',
    datatype: 'json',
    colNames:['DB Id','Tarih', 'ÇÄ±kan BalÄ±k','Giren BalÄ±k','Ortalama','AçÄ±klama'],
    colModel :[
      {name:'no', index:'no', width:55, align:'center'},
      {name:'tarih', index:'tarih', width:90, align:'center'},
      {name:'giren', index:'giren', width:90, align:'center'},
      {name:'cikan', index:'cikan', width:90, align:'center'},
      {name:'ortalama', index:'ortalama', width:90, align:'center'},
      {name:'aciklama', index:'aciklama', width:250, sortable:false} ],
    pager: jQuery('#pager'),
    height:260,
    width:640,
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: “asc”,
    viewrecords: true,
    imgpath: 'themes/basic/images',
    caption: 'BalÄ±k Hareket Tablosu'
     });
});
</script>
</head>
<body>
<table id=”list” class=”scroll”></table>
<div id=”pager” class=”scroll” style=”text-align:center;”></div>
</body>
</html>

tony on php+mysql editing problem

Wed, 27 Aug 2008 02:20:01 +0300

Hello ibrahim,

First - my question is what does not work? What do you try to do?

To make things simple do not try to include all the needed files - i.e I mean

try simplify the code first -

include only one grid style sheet

include only jquery

inlude base.grid.js

construct the grid

if all goes ok

include grid.inlinedit.js and construct onselectrow logic. Try to explain yourself what do yo want to do.

A good starting point here is the documentation.

I recommend you first to read the docs.

Best Regards

Tony

drlinux on php+mysql editing problem

Tue, 26 Aug 2008 07:35:12 +0300

Well new three files, first: edit.html:

<html>
<head>
<title>BalÄ±k Hareket Tablosu</title>
</style>
<link rel="stylesheet" type="text/css" media="screen" href="themes/tree.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/tabs.css" />
<link rel="stylesheet" type="text/css" media="screen" title="basic" href="themes/basic/grid.css" />
<link rel="alternate stylesheet" type="text/css" href="themes/coffee/grid.css" title="coffee" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="themes/green/grid.css" title="green" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="themes/sand/grid.css" title="sand" media="screen" />

<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.datepicker.css" />

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.splitter.js" type="text/javascript"></script>
<script src="js/jquery.jqTree.js" type="text/javascript"></script>
<script src="js/jquery.jqDynTabs.js" type="text/javascript"></script>
<script src="js/ui.datepicker.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jqModal.js" type="text/javascript"></script>
<script src="js/jqDnR.js" type="text/javascript"></script>

<script type="text/javascript" src="js/styleswitch.js"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
var lastsel;
jQuery("#rowed3").jqGrid({
       url:'sec.php',
    datatype: "xml",
    mtype: 'GET',
       colNames:['DB Id','Tarih', 'ÇÄ±kan BalÄ±k','Giren BalÄ±k','Ortalama','AçÄ±klama'],
       colModel :[
      {name:'id', index:'id', width:55, align:'center'},
      {name:'tarih', index:'tarih', width:90, align:'center'},
      {name:'giren', index:'giren', width:90, align:'center', editable:true},
      {name:'cikan', index:'cikan', width:90, align:'center', editable:true},
      {name:'ortalama', index:'ortalama', width:90, align:'center', editable:true},
      {name:'aciklama', index:'aciklama', width:250, sortable:false, editable:true} ],
       rowNum:10,
       rowList:[10,20,30],
       imgpath: gridimgpath,
       pager: jQuery('#prowed3'),
       sortname: 'id',
    viewrecords: true,
    sortorder: "asc",
    onSelectRow: function(id){
        if(id && id!==lastsel){
            jQuery('#rowed3').restoreRow(lastsel);
            jQuery('#rowed3').editRow(id,true);
            lastsel=id;
        }
    },
    editurl: "sec.php",
    caption: "BalÄ±k Hareketleri Tablosu Düzenleme Modu"
}).navGrid("#prowed3",{edit:false,add:false,del:false});
});
</script>

</head>
<body>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
</html>

Then, second file: sec.php:

<?php
$page = $_GET['page'];
$limit = $_GET['rows'];
$sidx = $_GET['sidx'];
$sord = $_GET['sord'];
if(!$sidx) $sidx =1;
$db = mysql_connect("localhost", "root", "pass") or die("Connection Error: " .
mysql_error());
mysql_select_db("aquadata") or die("Error connecting to db.");
$result = mysql_query("SELECT COUNT(*) AS count FROM balik_hareket");
$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;
if($start < 0) $start = 0;
$SQL = "SELECT * FROM balik_hareket ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error());
if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
              header("Content-type: application/xhtml+xml;charset=utf-8");
} else {
          header("Content-type: text/xml;charset=utf-8");
}
echo "<?xml version='1.0' encoding='utf-8'?>";
echo "<rows>";
echo "<page>".$page."</page>";
echo "<total>".$total_pages."</total>";
echo "<records>".$count."</records>";
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
echo "<row id='". $row[no]."'>";
            echo "<cell>". $row[id]."</cell>";
            echo "<cell>". $row[tarih]."</cell>";
            echo "<cell>". $row[cikan]."</cell>";
            echo "<cell>". $row[giren]."</cell>";
            echo "<cell>". $row[ortalama]."</cell>";
            echo "<cell><![CDATA[". $row[aciklama]."]]></cell>";
echo "</row>";
}
echo "</rows>";
?>

Third file (sec.php and index.html working both with no errors): index.html

<html>
<head>
<title>BalÄ±k Hareket Tablosu</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jquery.jqModal.js" type="text/javascript"></script>
<script src="js/jquery.jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
    url:'sec.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['DB Id','Tarih', 'ÇÄ±kan BalÄ±k','Giren BalÄ±k','Ortalama','AçÄ±klama'],
    colModel :[
      {name:'no', index:'no', width:55, align:'center'},
      {name:'tarih', index:'tarih', width:90, align:'center'},
      {name:'giren', index:'giren', width:90, align:'center'},
      {name:'cikan', index:'cikan', width:90, align:'center'},
      {name:'ortalama', index:'ortalama', width:90, align:'center'},
      {name:'aciklama', index:'aciklama', width:250, sortable:false} ],
    pager: jQuery('#pager'),
    height:260,
    width:640,
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: "asc",
    viewrecords: true,
    imgpath: 'themes/basic/images',
    caption: 'BalÄ±k Hareket Tablosu'
     });
});
</script>
</head>
<body>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
</html>

edit.html do not work i can't undestand... why? please give me a way 🙂

Regards,

ibrahim

drlinux on php+mysql editing problem

Tue, 26 Aug 2008 04:08:58 +0300

Hello,

I'm trying to edit/add new rows to my database. I got the datas theis no problem... But I can't get the editing cells when i double click the cells please help me. This is my first ajax experience thanks a lot for this plug-in.

Ps: If you answer me clearly on my code i will learn what is my problem exactly. (I have no problem getting datas from database. I can't edit rows & cells). 🙁

Regards.

Ibrahim YILMAZ

<html>
<head>
<title>BalÄ±k Hareket Tablosu</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/jqModal.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.jqGrid.js" type="text/javascript"></script>
<script src="js/jquery.jqModal.js" type="text/javascript"></script>
<script src="js/jquery.jqDnR.js" type="text/javascript"></script>
<script src="js/grid.formedit" type="text/javascript"></script>
<script src="js/grid.inlinedit.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
    url:'sec.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['DB Id','Tarih', 'ÇÄ±kan BalÄ±k','Giren BalÄ±k','Ortalama','AçÄ±klama'],
    colModel :[
      {name:'no', index:'no', width:55, align:'center'},
      {name:'tarih', index:'tarih', width:90, align:'center', editable:true},
      {name:'giren', index:'giren', width:90, align:'center', editable:true},
      {name:'cikan', index:'cikan', width:90, align:'center', editable:true},
      {name:'ortalama', index:'ortalama', width:90, align:'center'},
      {name:'aciklama', index:'aciklama', width:250, sortable:false, edittype:"textarea", editoptions:{rows:"2",cols:"10"}} ],
      onSelectRow: function(id){
if(id && id!==lastsel2){
    jQuery('#list').restoreRow(lastsel2);
    jQuery('#list').editRow(id,true);
      lastsel2=id;
}
},
    pager: jQuery('#pager'),
    editurl:"editor.php",
    height:260,
    width:640,
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'no',
    sortorder: "asc",
    viewrecords: true,
    imgpath: 'themes/basic/images',
    caption: 'BalÄ±k Hareket Tablosu'
     });
});
</script>
</head>
<body>
<table id="list" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
</html>