0

I'm new to use jqGrid and there is a problem when I try to use the inline edit feature. Here is my code: My First Grid

    <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/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 type="text/javascript">

        $(function(){ 
            var lastsel2
            $("#list").jqGrid({                    
                url:'example.php',
                datatype: 'xml',
                mtype: 'GET',
                colNames:['id','name', 'status'],
                colModel :[ 
                    {name:'id', index:'id', width:55}, 
                    {name:'name', index:'name', width:90, editable: true}, 
                    {name:'status', index:'status', width:80, align:'right', editable: true},                         
                ],    

                onSelectRow: function(id){
                    if(appid && appid!==lastsel2){
                        jQuery('#list').restoreRow(lastsel2);
                        jQuery('#list').editRow(id,true);
                        lastsel2=id;
                    }                       
                },
                editurl: "example.php",
                pager: '#pager',
                rowNum:10,
                rowList:[10,20,30],
                sortname: 'appid',
                sortorder: 'desc',
                viewrecords: true,
                gridview: true,
                caption: 'My first grid'
            }); 
        });

    </script>

</head>
<body>
    <table id="list"><tr><td/></tr></table> 
    <div id="pager"></div> 
</body>

The problem is it could edit the row when I click it, and also can save temporarily after I press the enter. But when I reload the grid, it still shows the previous data before I eidt, which means it doesn't update the database. I wonder why and how to solve it?

Here is the example.php code:

    <?php
include("dbconfig.php");
$page = $_GET['page'];
$limit = $_GET['rows'];
$sidx = $_GET['sidx'];
$sord = $_GET['sord'];

if (!$sidx)
    $sidx = 1;

$db = mysql_connect("$dbhost", "$dbuser", "$dbpassword") or die("Connection Error: " . mysql_error());

mysql_select_db("$database") or die("Error connecting to db.");

$result = mysql_query("SELECT COUNT(*) AS count FROM app");
$row = mysql_fetch_array($result, MYSQL_ASSOC);
$count = $row['count'];

if ($count > 0 && $limit > 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 id, name, status FROM app";
$result = mysql_query($SQL) or die("Couldn't execute query." . mysql_error());

header("Content-type: text/xml;charset=utf-8");

$s = "<?xml version='1.0' encoding='utf-8'?>";
$s .= "<rows>";
$s .= "<page>" . $page . "</page>";
$s .= "<total>" . $total_pages . "</total>";
$s .= "<records>" . $count . "</records>";

// be sure to put text data in CDATA
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
    $s .= "<row id='" . $row['id'] . "'>";
    $s .= "<cell>" . $row['id'] . "</cell>";
    $s .= "<cell>" . $row['name'] . "</cell>";
    $s .= "<cell>" . $row['status'] . "</cell>";
    $s .= "</row>";
}
$s .= "</rows>";
echo $s;
?>
0

1 Answer 1

0

First of all you should change the code

onSelectRow: function(id){
    if(appid && appid!==lastsel2){
        jQuery('#list').restoreRow(lastsel2);
        jQuery('#list').editRow(id,true);
        lastsel2=id;
    }                       
}

to something like

onSelectRow: function (id) {
    if (id && id !== lastsel2){
        jQuery('#list').restoreRow(lastsel2);
        jQuery('#list').editRow(id,true);
        lastsel2 = id;
    }                       
}

because currently you use undefined appid instead of id.

Moreover you should remove trailing comma at the end of colModel definition: change },] to }] and place semicolon after var lastsel2.

9
  • Thank you for your help, but I did what you said, it still doesn't work. I wonder if the jqgrid will auto update the change to database after data has been edited? If not, do I need to call the saveRow method to make it or else?
    – user878729
    Aug 24, 2011 at 16:39
  • @user878729: editRow call saveRow intern after the user press "Enter". Probably you have problem on the server side under the URL "example.php" (see editurl parameter which you use). jqGrid just send the modified data to the URL and the web server (your PHP code under example.php) is responsible to saving the modified data in the database.
    – Oleg
    Aug 24, 2011 at 16:48
  • I check the example.php and found that I don't have a sql statement to get the data from saveRow, and execute the sql. I guess that is the problem. Could you tell me how am I able to do it? Thanks!
    – user878729
    Aug 24, 2011 at 16:56
  • @user878729: I don't use PHP myself. You can use Fiddler or Firebug to see the traffic between the server and the client. I don't know which developer environment you use to debug the PHP code. With Visual Studio I can very easy debug my C# code.
    – Oleg
    Aug 24, 2011 at 16:57
  • could you check my php file to see if there is anything wrong? I guess I should add a variable to get data from the saveRow method, but I'm not very sure about it. Thank you!
    – user878729
    Aug 24, 2011 at 17:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.