peter_coop
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
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
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
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.
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....
ASKER
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
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>";
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.cs s" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></s cript>
<script src="js/jquery.jqGrid.min. js" type="text/javascript"></s cript>
<script src="src/jqModal.js" type="text/javascript"></s cript>
<script src="src/jqDnR.js" type="text/javascript"></s cript>
<script type="text/javascript">
jQuery(document).ready(fun ction(){
jQuery("#list").jqGrid({
url:'example.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Service','Activ ity', '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>
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
<link rel="stylesheet" type="text/css" media="screen" href="js/themes/jqModal.cs
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></s
<script src="js/jquery.jqGrid.min.
<script src="src/jqModal.js" type="text/javascript"></s
<script src="src/jqDnR.js" type="text/javascript"></s
<script type="text/javascript">
jQuery(document).ready(fun
jQuery("#list").jqGrid({
url:'example.php',
datatype: 'xml',
mtype: 'GET',
colNames:['Service','Activ
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;"
</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>";
?>
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.
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.
ASKER
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
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>
OK, ill rewrite PHP can you give me the sql print out of your table, basically the create table statement?
ASKER
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 ;
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
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]."'>";
$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]."'>";
ASKER
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
ASKER
@Sammaye
still no output. just white screen. if i run example.php i get non member errors. thanks
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>
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
$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
// select the database
Should be:
// select the database
mysql_select_db($database_
right tested now and it works on my computer
Just download and replace the current one
example.php.txt
example.php.txt
ASKER
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.cs s" />
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 :)
<link rel="stylesheet" type="text/css" media="screen" href="js/themes/basic/grid
<link rel="stylesheet" type="text/css" media="screen" href="js/themes/jqModal.cs
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.
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.
ASKER
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
.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.
If you place them both here I'll see what you have got in your download.
ASKER
thank you very much. i have included the css as text files. many thanks.
jqModal-css.txt
grid-css.txt
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/jquer y-ui-1.7.1 .custom.cs s" /> //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.
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/jquer
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.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
ASKER
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
If you just tell me which of the three you have I can judge version and then build the css tutorial for you
ASKER
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
ASKER
thank you. that would be good. cheers
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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?
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?
ASKER
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
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
Screenshot.png
ASKER
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
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.
ASKER
i have kept the folder integrity. i have just renamed example to admin. thanks
ie8-html.txt
firefox-html.txt
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?
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
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
ASKER
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
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
ASKER
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
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('../Connectio ns/conn.ph p'); ?>
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 :)
<?php require_once('../Connectio
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 :)
ASKER
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
ASKER
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 :)
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 :)
But yea everything is on those demo pages with the code below, enjoy :)
ASKER
thanks very much for all your help. points well and truly deserved. cheers
ASKER
thanks once again for all your help. hope to speak again soon :-)
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