jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

php+mysql editing problem

26/08/2008
04:08

drlinux

Member

Members

Forum Posts: 25

Member Since:
26/08/2008

Offline

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>

26/08/2008
07:35

drlinux

Member

Members

Forum Posts: 25

Member Since:
26/08/2008

Offline

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

27/08/2008
02:20

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

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

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.

27/08/2008
06:08

drlinux

Member

Members

Forum Posts: 25

Member Since:
26/08/2008

Offline

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>

27/08/2008
06:23

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

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

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.

27/08/2008
06:30

drlinux

Member

Members

Forum Posts: 25

Member Since:
26/08/2008

Offline

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});
});

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
32 Guest(s)

Currently Browsing this Page:
1 Guest(s)