jQuery Grid Plugin - jqGridForum

Forum

July 12th, 2025

A A A

Topic RSS

Jgrid + Mysql

02/12/2009
19:00

Splinter

Guest

Guests

Hi,

I am currently trying to find problem in which my grid isn't working.

I have followed the “my first grid guide”, step by step, but it is not working. I soppose that i'm missing something.

Firefox displays the page withought errors but does not populate the grid.

IE8 does display and error in line 12 in char 7209 of the jquery-1.3.2.min.js

Here are the details:

MySQL database: contactos

CREATE TABLE contactosgrid(
id int( 11 ) NOT NULL AUTO_INCREMENT ,
nome TEXT NOT NULL ,
login TEXT NOT NULL ,
ext int( 11 ) DEFAULT NULL ,
tel int( 11 ) DEFAULT NULL ,
pc TEXT NOT NULL ,
user int( 11 ) DEFAULT NULL ,
printer TEXT DEFAULT NULL ,
localp TEXT NOT NULL ,
email TEXT NOT NULL ,
PRIMARY KEY ( id ) );

INSERT INTO `contactos`.`contactosgrid` (`id`, `nome`, `login`, `ext`, `tel`, `pc`, `user`, `printer`, `localp`, `email`) VALUES (NULL, 'John Doe', 'U1235556', '8433', '5433', 'Computer183', '000', NULL, 'IT', mailto:'john.doe@contoso.com'“>
<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>My First Grid</title>

<link rel=”stylesheet” type=”text/css” media=”screen” href=”css/redmond/jquery-ui-1.7.1.custom.css” />
<link rel=”stylesheet” type=”text/css” media=”screen” href=”css/ui.jqgrid.css” />

<style>
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>

<script src=”js/jquery-1.3.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”>
var lastSel;
var rowid;
var keys;
var oneditfunc;
var succesfunc;
var url;
var extraparam;
var aftersavefunc;
var errorfunc;
var afterrestorefunc;

jQuery(document).ready(function(){
jQuery(”#list”).jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Id','Nome', 'Login','Ext','Tel','PC','User','Printer','Local','Email'],
    colModel :[
      {name:'id', index:'id', width:55},
      {name:'nome', index:'nome', width:90, editable:true},
      {name:'login', index:'login', width:80, align:'right', editable:true},
      {name:'ext', index:'ext', width:80, align:'right', editable:true},
      {name:'tel', index:'tel', width:80, align:'right', editable:true},
      {name:'pc', index:'pc', width:150, editable:true},
      {name:'user', index:'user', width:80, align:'right', editable:true},
      {name:'printer', index:'printer', width:80, align:'right', editable:true},
      {name:'localp', index:'localp', width:80, align:'right', editable:true},
      {name:'email', index:'email', width:80, align:'right', editable:true},

    ],
   xmlReader: {
      root:”rows”,
      row:”row”,
      page:”rows>page”,
      total:”rows>total”,
      records:”rows>records”,
      repeatitems:false,

},

    pager: '#pager',
    rowNum:500,
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: 'desc',
    viewrecords: true,
loadonce: true,
    caption: 'Lista Contactos'

}).navGrid('#pager',{view:true, del:true},

{reloadAfterSubmit:false, }, // edit options
{reloadAfterSubmit:false,}, // add options
{reloadAfterSubmit:false}, // del options
{Find: “Go”, multipleSearch:true,} // search options
);
//{edit:true,add:true,del:true});
});
</script>

</head>
<body>
<table id=”list”></table>
<div id=”pager”></div>
</body>
</html>

PHP Example.php:

<?php
//include the information needed for the connection to MySQL data base server.
// we store here username, database and password

$dbhost = "localhost";
$dbuser = "root";
$dbpassword = "password#123";
$database = "contactos";

// to the url parameter are added 4 parameters as described in colModel
// we should get these parameters to construct the needed query
// Since we specify in the options of the grid that we will use a GET method
// we should use the appropriate command to obtain the parameters.
// In our case this is $_GET. If we specify that we want to use post
// we should use $_POST. Maybe the better way is to use $_REQUEST, which
// contain both the GET and POST variables. For more information refer to php documentation.
// Get the requested page. By default grid sets this to 1.
$page = $_GET['page'];

// get how many rows we want to have into the grid – rowNum parameter in the grid
$limit = $_GET['rows'];

// get index row – i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel
$sidx = $_GET['sidx'];

// sorting order – at first time sortorder
$sord = $_GET['sord'];

// if we not pass at first time index use the first column for the index or what you want
if(!$sidx) $sidx =1;

// connect to the MySQL database server
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die(”Connection Error: ” . mysql_error());

// select the database
mysql_select_db($database) or die(”Error connecting to db.”);

// calculate the number of rows for the query. We need this for paging the result
$result = mysql_query(”SELECT COUNT(*) AS count FROM contactosgrid”);
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];

// calculate the total pages for the query
if( $count > 0 && $limit > 0) {
              $total_pages = ceil($count/$limit);
} else {
              $total_pages = 0;
}

// if for some reasons the requested page is greater than the total
// set the requested page to total page
if ($page > $total_pages) $page=$total_pages;

// calculate the starting position of the rows
$start = $limit*$page – $limit;

// if for some reasons start position is negative set it to 0
// typical case is that the user type 0 for the requested page
if($start <0) $start = 0;

// the actual query for the grid data
$SQL = “SELECT id, nome, login, ext, tel, pc, user, printer, localp, email FROM contactosgrid ORDER BY $sidx $sord LIMIT $start , $limit”;
$result = mysql_query( $SQL ) or die(”Couldn't execute query.”.mysql_error());

// we should set the appropriate header information. Do not forget this.
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><![CDATA[". $row[nome].”]]</cell>”;
    $s .= “<cell><![CDATA[". $row[login].”]]</cell>”;
    $s .= “<cell>”. $row[ext].”</cell>”;
    $s .= “<cell>”. $row[tel].”</cell>”;
    $s .= “<cell><![CDATA[". $row[pc].”]]</cell>”;
    $s .= “<cell><![CDATA[". $row[user].”]]</cell>”;
    $s .= “<cell><![CDATA[". $row[printer].”]]</cell>”;
    $s .= “<cell><![CDATA[". $row[localp].”]]</cell>”;
    $s .= “<cell><![CDATA[". $row[email].”]]</cell>”;
    $s .= “<cell><![CDATA[". $row[note].”]]></cell>”;
    $s .= “</row>”;
}
$s .= “</rows>”;

echo $s;
?>

Need help!!

03/12/2009
13:34

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

The first error that I see is describing the colModel,

    colModel :[
      {name:'id', index:'id', width:55},
      {name:'nome', index:'nome', width:90, editable:true},
      {name:'login', index:'login', width:80, align:'right', editable:true},
      {name:'ext', index:'ext', width:80, align:'right', editable:true},
      {name:'tel', index:'tel', width:80, align:'right', editable:true},
      {name:'pc', index:'pc', width:150, editable:true},
      {name:'user', index:'user', width:80, align:'right', editable:true},
      {name:'printer', index:'printer', width:80, align:'right', editable:true},
      {name:'localp', index:'localp', width:80, align:'right', editable:true},
      {name:'email', index:'email', width:80, align:'right', editable:true}, <=== Error

Most browsers do not like this.

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.

03/12/2009
16:56

Splinter

Guest

Guests

Thanks for the reply, i have cleared the comma but it's the same.

I have started a new grid (copy past from the basic instructions), and still does not work.

If i do not have any record on the table, the page loads withought errors.

If i do the error is shows as follows:

Message: Object required
Line: 12
Char: 7209
Code: 0
URI: http://localhost/jgrid/js/jque.....3.2.min.js

05/12/2009
14:46

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

My recommendation is first to begin with very simple configuration. You have a lot of other error:

1. Again the comma problem at end of xmlReader - i.e you have

xmlReader : {

....

repeatitems:false, <====Error

}

2. Looking at the same reader it seems like you turn repeatitems to false, but your output is for repeatitems : true

I recoommend you to begin to read the documentation:

http://www.trirand.com/jqgridw.....a#xml_data

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.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 994

Currently Online:
41 Guest(s)

Currently Browsing this Page:
1 Guest(s)