Forum
Log In
Home
Topic RSS
18:27
02/03/2011
Offline
it appears that the input box for the page is too small. i can see only the top 25% of the page number. Does anyone know what the issue is?
18:54
10/08/2009
Offline
You should do following:
- verify that jQuery UI and jqGrid CSS are really loaded on the page
- verify that <!DOCTYPE html ... is defined in the first row of your page
- verify that you don't use Internet Explorer in some old compatibility mode. If it was your problem you can fix it by including meta like <meta http-equiv="X-UA-Compatible" content="IE=edge" /> on your page
Best regards
Oleg
20:32
02/03/2011
Offline
When I remove jqGrid css from the page, the page number shows up ok, but obviously there are many other issues, so I added it back in. When I add the doctype, the page number looks good, but the View 1 -25 of 321 is cut off about 25% at the bottom. # 3 above had no effect. Do you have any other suggestions? Thanks!!!
08:54
10/08/2009
Offline
It is difficult to guess not haven seen the page about which you wrote. Could you post the URL to the page having the problem or post the full HTML page which can be used to reproduce your problem?
16:04
02/03/2011
Offline
Here's the page.
<html>
<head>
<title>AMAC Remedy</title>
<link type="text/css" href="static/styles/jquery.ui.all.css" rel="stylesheet">
<link type="text/css" href="static/styles/ui.jqgrid.css" rel="stylesheet">
<link type="text/css" href="static/styles/main.css" rel="stylesheet">
<script type="text/javascript" src="static/scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="static/scripts/grid.locale-en.js"></script>
<script type="text/javascript" src="static/scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="static/scripts/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="static/scripts/json2.js"></script>
</head>
<body>
<div id="af-logo"><img src="static/images/af-logo.png" /> <img src="static/images/afwa-logo.png" /></div>
<div id="header"><span class="title">AMAC Remedy</span><br /></div>
<div class="clear"></div>
<div id="contentMargin" >
<div id="content" >
<div id="tabs" >
<ul>
<li><a href="#tabs-1">Location List</a></li>
<li><a href="#tabs-2">Program List</a></li>
</ul>
<div id="tabs-1">
<table id="locationList"></table>
<div id="locationPager"></div>
</div>
<div id="tabs-2">
<table id="programList"></table>
<div id="programPager"></div>
</div>
</div>
</div>
</div>
<div id="ajaxMessage"></div>
</body>
<script type="text/javascript">
$(document).ready( function () {
$(function(){
$('#tabs').tabs();
});
jQuery("#locationList").jqGrid({
url:'locations',
datatype: 'json',
colNames:['Location Key','Location Name', 'Latitude', 'Longitude','Location Alias'],
colModel:[
{name:'locationKey',index:'locationKey', width:80},
{name:'locationName',index:'locationName', width:150},
{name:'latitude',index:'latitude', width:70},
{name:'longitude',index:'longitude', width:70},
{name:'locationAlias',index:'locationAlias', width:300, sortable:false}
],
rowNum:25,
rowList:[25,100,500],
pager: '#locationPager',
sortname: 'locationKey',
altRows: true,
viewrecords: true,
sortorder: 'asc',
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
id: 'locationKey'
},
width: 1040,
height: 551
});
jQuery("#programList").jqGrid({
url:'programs',
datatype: 'json',
colNames:['Program Key','Program Name', 'Program Id', 'Location Name','Program Status'],
colModel:[
{name:'programKey',index:'programKey', width:80},
{name:'programName',index:'programName', width:100},
{name:'programId',index:'programId', width:100},
{name:'locationName',index:'locationName', width:150},
{name:'programStatus',index:'programStatus', width:100}
],
rowNum:25,
rowList:[25,100,500],
pager: '#programPager',
sortname: 'programKey',
altRows: true,
viewrecords: true,
sortorder: 'asc',
jsonReader: {
root: 'rows',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
id: 'programKey'
},
width: 1040,
height: 551
});
});
</script>
</html>
Here's a sample json string:
{"total": 1, "page": 1, "records": 3, "rows": [{"locationKey":1,"locationName":"abc","latitude":36.03,"longitude":-74.96,"locationAlias":""}, {"locationKey":2,"locationName":"def","latitude":22.57,"longitude":-80.73,"locationAlias":""}, {"locationKey":3,"locationName":"sss","latitude":39.79,"longitude":12.44,"locationAlias":"lfjslfj sldjflsdkj sadlkjlsdkjf flkasdj"}
16:08
10/08/2009
Offline
You can fix the problem if you include CSS
on your page. Moreover you should always write the page in one HTML or XHTML dialect which you define in the corresponding <!DOCTYPE statement. You code looks mostly like HTML 4.01 (with exception of <br />) so you can use
I recommend you additionally always verify your HTML markup in http://validator.w3.org/. You will see some small errors which you has.
The fixed code you will find here.
Best regards
Oleg
18:33
02/03/2011
Offline
Thanks!!! That's a great help. What are the ramefications of not fixing the errors that the validator flags?
19:13
10/08/2009
Offline
If you don't fix validation errors then you have much more probability that your page will look different in different web browsers or different versions of the same browser. It means that the web browser try to guess what you mean. So I try to validate my pages always in http://validator.w3.org/ and validate my JavaScript code in http://www.jslint.com/.
Best regards
Oleg
Most Users Ever Online: 715
Currently Online:
40 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
