Link to home
Start Free TrialLog in
Avatar of peter_coop
peter_coopFlag for United Kingdom of Great Britain and Northern Ireland

asked on

jqGrid not displaying data

hi
i am following a tutorial using jqGrid using jquery and i am unable to display any data. i have included my code and would be grateful if someone could tell me where i am going wrong.
I have included the code in files so they are not indexed.

many thanks
example-php.txt
table-html.txt
Avatar of Sammaye
Sammaye

try that afterr get sord:
if(!$sidx) $sidx =1;

And rename your html elements to the row names in your php:

      {name:'invid', index:'invid', width:55},
      {name:'invdate', index:'invdate', width:90},
      {name:'amount', index:'amount', width:80, align:'right'},
      {name:'tax', index:'tax', width:80, align:'right'},
      {name:'total', index:'total', width:80, align:'right'},
      {name:'note', index:'note', width:150, sortable:false} ],

I'll run the script to detect the actual output that's just a preliminary comment
Avatar of peter_coop

ASKER

@Sammaye
thanks for reply. my html elemnts are the same as the php. i have made amendment to sidx and still no change. thanks
example-php.txt
because your here atm and I haven't got to run the page yet can you tell me the exact output....maybe even provide a screen shot.

It might be that your JQuery aint being read correctly.
I have thought about one more thing, are all of your fields in the table including ID? since I used a tutorial once from the official site and the primary key was missing I had to add it manually....
here is screen of output. i have also included id as suggested. also, not getting any out put, not neven error db message etc. cheers
jqGrid-output.jpg
In your php file you are also selecting pagin from act but data from invheader
Your grabberd fields are not being pulled out name your php fields that same your table fields
// the actual query for the grid data 
 
$SQL = "SELECT service, activity, user, item, filebox, date FROM act 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
 
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>";
 
 
 
// be sure to put text data in CDATA
 
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
 
echo "<row id='". $row[invid]."'>";            
 
            echo "<cell>". $row[invid]."</cell>";
 
            echo "<cell>". $row[invdate]."</cell>";
 
            echo "<cell>". $row[amount]."</cell>";
 
            echo "<cell>". $row[tax]."</cell>";
 
            echo "<cell>". $row[total]."</cell>";
 
            echo "<cell><![CDATA[". $row[note]."]]></cell>";
 
echo "</row>";
 
}
 
echo "</rows>"; 

Open in new window

Ok this works (see ciode snippert for php):



and this html:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="js/themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/themes/jqModal.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="src/jqModal.js" type="text/javascript"></script>
<script src="src/jqDnR.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery("#list").jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Service','Activity', 'User','Item','File Box','Date'],
    colModel :[
               {name:'invid', index:'invid', width:55},
               {name:'invdate', index:'invdate', width:90},
               {name:'amount', index:'amount', width:80, align:'right'},
               {name:'tax', index:'tax', width:80, align:'right'},
               {name:'total', index:'total', width:80, align:'right'},
               {name:'note', index:'note', width:150, sortable:false} ],
    pager: jQuery('#pager'),
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: "desc",
    viewrecords: true,
    imgpath: 'js/themes/basic/images',
    caption: 'My first grid'
  });
});
</script>

</head>

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

<?php require_once('includes/header.php'); ?>
<?php 
$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(!$sidx) $sidx =1; 
 
// select the database 
 
// calculate the number of rows for the query. We need this for paging the result 
$result = $db->query("SELECT COUNT(*) AS count FROM invheader"); 
     	while($result->fetchInto($row, DB_FETCHMODE_ASSOC)){
     		$rows[] = $row;
     	}
 
$count = $result->numRows(); 
 
// calculate the total pages for the query 
if( $count > 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 invid, invdate, amount, tax,total, note FROM invheader ORDER BY $sidx $sord LIMIT $start , $limit"; 
$result = $db->query($SQL);
 
// we should set the appropriate header information
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>";
 
// be sure to put text data in CDATA
while($result->fetchInto($row, DB_FETCHMODE_ASSOC)){
echo "<row id='". $row[invid]."'>";            
            echo "<cell>". $row[invid]."</cell>";
            echo "<cell>". $row[invdate]."</cell>";
            echo "<cell>". $row[amount]."</cell>";
            echo "<cell>". $row[tax]."</cell>";
            echo "<cell>". $row[total]."</cell>";
            echo "<cell><![CDATA[". $row[note]."]]></cell>";
echo "</row>";
}
echo "</rows>"; 
?>

Open in new window

Ok I'll walk you through what you did wrong:

1. The table structure was wrong (primary key invid not ID)
2. sortname: 'id' = sortname: 'invid' since that is the primary key of your table
3. your sql queries were mashed so I rewrote them

If you just rewrite the sql queries piece by piece now it should work fine, remember to test after each code change to make sure you haven't broken the script.
thanks for doing this, but i do not have a table called invheader. my table is called act and has the fields as this: 'Service','Activity', 'User','Item','File Box','Date'

here is the updated html. i used my own table not tutorial table. thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="js/themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/themes/jqModal.css" />
<script src="js/jquery.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">
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['ID','Service','Activity', 'User','Item','File Box','Date'],
    colModel :[ 
	  {name:'id', index:'id', width:90},
      {name:'service', index:'service', width:90}, 
      {name:'activity', index:'activity', width:90}, 
      {name:'user', index:'user', width:80, align:'right'}, 
      {name:'item', index:'item', width:80, align:'right'}, 
      {name:'filebox', index:'filebox', width:90, align:'right'}, 
      {name:'date', index:'date', width:150} ],
    pager: jQuery('#pager'),
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    imgpath: 'js/themes/basic/images',
    caption: 'My first grid'
  }); 
}); 
</script>
 
</head>
 
<body>
<table id="list" class="scroll"></table> 
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
</html>

Open in new window

OK, ill rewrite PHP can you give me the sql print out of your table, basically the create table statement?
here u go. many thanks
CREATE TABLE `act` (
  `id` int(11) NOT NULL auto_increment,
  `service` varchar(20) NOT NULL default '',
  `activity` varchar(255) NOT NULL,
  `department` int(11) NOT NULL default '0',
  `company` int(11) NOT NULL default '0',
  `user` varchar(255) NOT NULL,
  `item` varchar(99) default 'N/A',
  `filebox` varchar(255) default NULL,
  `date` timestamp NULL default CURRENT_TIMESTAMP,
  `quantity` int(11) NOT NULL default '0',
  `type` varchar(255) default '0',
  `new` tinyint(4) NOT NULL default '0',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=34 ;

Open in new window

OK this should work without the need for me to test. Just give me a shout if you need it explaining or something is wrong. I have replaced the SQL connections so it should work out the box.
test.php.txt
example.php.txt
ok addendum after seeing create table:

$SQL = "SELECT * FROM act ORDER BY $sidx $sord LIMIT $start , $limit";

should be:

$SQL = "SELECT id, service, activity, user, item, filebox, date FROM act ORDER BY $sidx $sord LIMIT $start , $limit";

and I made a small error:

echo "<row id='". $row[invid]."'>";

should be:

echo "<row id='". $row[id]."'>";
got to leave the office for a while sammaye so will check when i return and report back. i shall up the points to reflect the work you have put into this. many thanks
@Sammaye
still no output. just white screen. if i run example.php i get non member errors. thanks
yes you will since example.php cannot run without its front end, use example.php from the original html you posted. Most likely in my rush to get 100 things done today I didn't change back the jquery urls etc, sorry abuot that:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="js/themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/themes/jqModal.css" />
<script src="js/jquery.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">
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['ID','Service','Activity', 'User','Item','File Box','Date'],
    colModel :[ 
          {name:'id', index:'id', width:90},
      {name:'service', index:'service', width:90}, 
      {name:'activity', index:'activity', width:90}, 
      {name:'user', index:'user', width:80, align:'right'}, 
      {name:'item', index:'item', width:80, align:'right'}, 
      {name:'filebox', index:'filebox', width:90, align:'right'}, 
      {name:'date', index:'date', width:150} ],
    pager: jQuery('#pager'),
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    imgpath: 'js/themes/basic/images',
    caption: 'My first grid'
  }); 
}); 
</script>
 
</head>
 
<body>
<table id="list" class="scroll"></table> 
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
</html>

Open in new window

As well I did actually make yet another error:

$result = $db->query("SELECT COUNT(*) AS count FROM act");

should be:

$result = mysql_query("SELECT COUNT(*) AS count FROM act");  

I knew I should have tested first, but thats all i can see wrong now treble checked it all everything checks out
ok maybe not:

// select the database

Should be:

// select the database
mysql_select_db($database_conn, $conn) or die("Error connecting to db.");

right tested now and it works on my computer
Just download and replace the current one
example.php.txt
thanks. works now. as a sidenote. is there a tutorial on jqgrid in relation to how to change test, size etc. i have looked at the css and can only assume that jqgrid takes it size from the table or the amount of records in the table? thanks once again
The looks of the table are changed via editiing:

<link rel="stylesheet" type="text/css" media="screen" href="js/themes/basic/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="js/themes/jqModal.css" />

 but the field sizes are changed via the JQuery using the colwidth attrtibute:

          {name:'id', index:'id', width:90},
      {name:'service', index:'service', width:90},
      {name:'activity', index:'activity', width:90},
      {name:'user', index:'user', width:80, align:'right'},
      {name:'item', index:'item', width:80, align:'right'},
      {name:'filebox', index:'filebox', width:90, align:'right'},
      {name:'date', index:'date', width:150} ],

so to expand the columns by say, 40:

          {name:'id', index:'id', width:130},
      {name:'service', index:'service', width:130},
      {name:'activity', index:'activity', width:130},
      {name:'user', index:'user', width:120, align:'right'},
      {name:'item', index:'item', width:120, align:'right'},
      {name:'filebox', index:'filebox', width:120, align:'right'},
      {name:'date', index:'date', width:190} ],

So the columns are edited by the JQuery but the table itself is by CSS. JQGrid is likely to take its size from the sum of the column widths although a CSS attribute can be defined.

Looked through this link a little: http://www.filamentgroup.com/lab/using_multiple_jquery_ui_themes_on_a_single_page/. I know its for multiple themes on one page but it seems as though the page includes a JQGrid theme chooser. If that don't work I'll look into its coding myself :)

Just as an added side note:

http://trirand.com/jqgrid/jqgrid.html

You will find that definitely helpful in customising JQGrid to suite your needs, some very nice demo's on there with code included.
as an example. i have looked through both grid.css and jqModal.css and nowhere that i can see can i change things like text size color etc. for example:

.Header th {
      font-size: 100%; font-weight: bold; text-align: left;
      padding: 2px;
      background-image: url(images/headerbg.gif) ;
      color: #FFFFFF;
      width: 100%;
      white-space: nowrap;
      }
i would have thought, would have changed the font-size for the header. but it dosen't. even if i make font-size 75% no change. am i doing something wrong or looking in the wrong place tyle the table etc. thankso st
if you just place both your css's up here a sec I'll go through them and give you step by step instructions. Most likely the main CSS that should be edited is grid.css and I think this is the one I edited when I built my JQGrid theme.

If you place them both here I'll see what you have got in your download.
thank you very much. i have included the css as text files. many thanks.
jqModal-css.txt
grid-css.txt
OK I've just found out how much versions differ. Are you using the latest version from http://www.trirand.com/blog/?page_id=6, since the version you are using has different CSS to the version I currently have installed which means your version is most likely older.

If you are running this version then most likely the reason why the CSS ain't working is because the new CSS style is:

<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.7.1.custom.css" /> //denoting the theme you are using
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" /> //the main css

I didn't realise this at first since I didn't realise what tutorial you had used but the tutorial is old. if you check your theme/ui.jqgrid.css and tell me if it exists I will know why your CSS ain't working.
Edit: or in my case is src/css/ui.jqgrid.css
i am using theme basic and all that is in there is grid.css and images folder. many thanks
or css/ui.gqgrid.css

If you just tell me which of the three you have I can judge version and then build the css tutorial for you
i think i am running 3.4 i am slight confused as to what files i should have. when i downloaded i selected all check boxes and then unzipped. where i am getting stumped is what file to use with what function. for example, what js files to use with a simple search function. it dosen't tell you in tutorial link. thanks
OK, do you think you can post all of your JQGrid files here since I cannot find the version you use?

Hold That thought OK I got a version fully working with styling, if I just have a couple hours I'll give you a way to install it and use so you can customize your CSS
thank you. that would be good. cheers
ASKER CERTIFIED SOLUTION
Avatar of Sammaye
Sammaye

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
You might also want to see this site:

http://www.jgari.com/?tag=jqgrid

A nice way to AJAX records with the version you now have if you follow my instruction. Found it whilst trying to find something on JQGrid themes, unfortunately I only found one other theme, Steel...sounds really bad don't it?
hey thanks so much. question. you said i have to install this version. all i can see is default.html plus example folder. also, i am not seeing any data.
yes you just extract the two and its installed.

No data, hmm, so your file structure is something like this within a folder in your website:

example/
default.htm
example.php

Are you seeing the table? that'll help me narrow down my error
As you can see it works for me, this displays some data from some random table I made but its the front end that matters atm. So I can only think it must be html/folder structure error
Screenshot.png
admin/
default.htm
example.php
js/themes
js/src
js/min

works in ie8 but not firefox. i have also done screenshot from ff. thanks
SRFile2009-10-27-19-32-8-234.jpg
show me the html a sec cos you don't state the example folder being there, it is crucial to keep the example folder intact.
i have kept the folder integrity. i have just renamed example to admin. thanks
ie8-html.txt
firefox-html.txt
I don't think these lines are valid:

      width: 1024,
      height: "100%",

that would explain why IE works since ie will ignore those lines try it without those lines adn you have double checked that all files exist where they should?
If you need to edit height etc do it within the css files after looking at firefox's firebug.
if you notice how I'm using firebug you will see I have gained the css functions that will allow you to change width and height. To change the height of the data area you move onto the third major div within the one highlighted and you check that ones properties for the css function it uses.

This is how you change the css, don;t put it within the JQuery the function will break on any decent browser.
Screenshot-1.png
i cannot see your grab. it is too small. cannot see the text. thanks
click on the image save and open it in your own photo manager :)
Here are a few tutorials that should allow you to get the most out of firebug, it really is an awsome tool:

http://www.evotech.net/blog/2007/06/introduction-to-firebug/
http://www.digitalmediaminute.com/screencast/firebug-js/
http://michaelsync.net/2007/09/09/firebug-tutorial-logging-profiling-and-commandline-part-i

the better and best i just found:

http://www.webmonkey.com/tutorial/Build_Better_Pages_With_Firebug

includes nice screenshots and everything
Sammaye
i did that and the image is all blured. when i enlarge. could u grab bigger size? i have also taken the height & width out of the query and it still not displaying in ff. many thanks
OK your code works on my FF, your PHP works my only guess is that its not pulling data from your data, run example.php on its own
Have you modified any of your PHP since we spoke, anything even your DB connection?, cos your php worked and as far as I know you haven't changed that
Is it possible that:

<?php require_once('../Connections/conn.php'); ?>

this is no longer valid since you have moved the file and now it's no longer pulling from your db?

It will tell you when you run the script so i'll be patient now and wait :)

couple of last questions my friend if you have time. i have loaded firebug and when i inspect element it is not eveident what the css is. for example div id="jqgh_service" class="ui-jqgrid-sortable" which is the header text. where do i find the css to change this to left instead center. i am not reading this right. also, if i wanted to put a search or refresh etc, how would i go about that. thanks
btw, removed doc header from example.php and ff loading data.
all the css will be in the left container in firebug, in there it will state the css functions for THAT element and only THAT, making it the most perfect tool in the world for web devs :). on the top div .ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column class in ui.jqgrid.css add float:left;. These classes I stated might be individual or all together search for one at a time and youll find the function, your looking for a text-align:center;.

Search functions, are built into JQGrid, almost everything is. http://trirand.com/jqgrid/jqgrid.html, this is a demos page, if you go to Advanced -> Search Big Sets, it will show you how to search things :)
You may wish to brush up on some advaned PHP MYSQL and Arrays before you take this task on however
go to Row Editing->Input types and you'll see something very cool you can do with JQGrid in fact I know where I can use this extension in one of my projects now :)

But yea everything is on those demo pages with the code below, enjoy :)
thanks very much for all your help. points well and truly deserved. cheers
thanks once again for all your help. hope to speak again soon :-)