jquery jqGrid JSON url problem

[ed]

Hi,
I've been trying to execute a jquery jqGrid url to return JSON data
but failed. Only a blank table with exact headings is displayed. I
tried changing the url several times but no data is displayed. The
following is part of the code.
------------------------------------------------------------------------------------------------------

<script src="{{=URL(r=request,c='static',f='jqGrid34/jquery.js')}}"
type="text/javascript"></script>
<!-- and at end the jqGrid Java Script file -->
<script src="{{=URL(r=request,c='static',f='jqGrid34/
jquery.jqGrid.js')}}" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#list2').jqGrid({
//
// this is the url I am using but failed to display data

url: "{{=URL(r=request,c='default',f='getjsdata')}}",

// I created a program in controllers to return json data and
tried the url below to access the program but also failed to display
data
url: '/EMIS/controllers/getjsdata.py',
//
datatype: 'json',
colNames:['Emp. No.','Last Name', 'First Name', 'Mid Name', 'Cost
Center', 'SSS No.'],
colModel:[
{name:'empno',index:'empno', width:80},
{name:'lname',index:'lname', width:160},
------------------------------------------------------------------------
Maybe the url address format is wrong or whatever. Can someone help me
on this.
Thank you very much.
Ed

[Mike]

Hey Ed,

We're using jqGrid with XML data. Something thoughts (if you haven't
tried them already):

1.) Try your grid with the FireBug plugin for FireFox and look at the
response being returned to the grid. I've had web2py tickets thown at
that point and the only to see it is via Firebug. Or just check for
tickets from the admin app

2.) Did you set the response headers? in my case I had to
use...response.headers["Content-Type"]="text/xml"

3.) What does your controller look like? In my controller that serves
up the XML I just return a string with the XML data "return xml"
instead of "return dict(xml = xml)"

Hope that helps. I like jqGrid since it has excellent documentation
and hope more of us can make it work with web2py.

Mike

On Mar 23, 5:27 am, ed <edbi...@rocketmail.com> wrote:
> Hi,
> I've been trying to execute a jquery jqGrid url to return JSON data
> but failed. Only a blank table with exact headings is displayed. I
> tried changing the url several times but no data is displayed. The
> following is part of the code.

> ---------------------------------------------------------------------------­---------------------------

[ed]

Hi Mike,
I am a web2py newbie and has to learn much from experts like you.
I would like to know which of the following url format you are using
to access your xml data in your server:

1. url: "{{=URL(r=request,c='default',f='getjsdata')}}",
2. url: '/EMIS/controllers/getjsdata.py',

Is it 1 or 2? Is it possible if you can email a source code of an
application
using web2py and jqGrid, I understand you are using jqGrid. I am also
very
interested to use jqGrid in web2py but not much documentation. I think
you
can provide the much needed example on this for everyone interested
in
this technology. Thanks in advance.
Ed

[Mike]

Hi Ed...

I'm no expert but here's what I'm doing for the URL,

url: '../controller/function1'

Here's a more complete example...I know there a several places where
more web2py-esqe helpers or style would help but this is how I first
mocked up jqGrid.

myview.html
==========

{{extend 'layout.html'}}
{{include 'jqgrid_refs.html'}} <!--this has the references for the
jqGrid files-->

<!--This is the jqgrid definition.-->
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#grid").jqGrid({ <!--this is the id used to position the
grid in the html below-->
imgpath: '/{{=request.application}}/static/themes/coffee/images',
<!-- sets the theme used for the grid-->
caption: 'My Grid', <!-- text to display in the header-->
url: '../controller/function1', <!-- this is an asyncronous call
to get the data for the grid-->
datatype: 'xml', <!--the grid expects xml formatted data (see
jqGrid docs for the default xml document structure)-->
mtype: 'GET',
height: '100%',
colNames: ['col1','col2', 'col3'],
colModel :[
{name:'col1', index:'col1', width:55, sorttype:'text},
{name:'col1', index:'col1', width:55, sorttype:'text},
{name:'col1', index:'col1', width:55, sorttype:'text}
],
sortname: 'col1', <!--default sort column-->
sortorder: 'asc', <!--default sort direction-->
pager: jQuery('#pager'), <!--this is the id used to position the
pager controls in the html view-->
rowNum:20, <!--default number of rows to display-->
rowList:[20,40,60,80,100], <!--dropdown choices to select the
number of rows to display-->
viewrecords: true, <!--displays the total number of rows in the
entire set in the pager bar-->

});

</script>


<!--page headings-->
<h2>This is your jqGrid...</h2>

<!--add the grid and pager-->
<table id="grid" class="scroll"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>


jqgrid_refs.html
============
<link rel="stylesheet" type="text/css" media="screen" href="/
{{=request.application}}/static/themes/coffee/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/
{{=request.application}}/static/themes/jqModal.css" />
<script src="/{{=request.application}}/static/jquery.js" type="text/
javascript"></script>
<script src="/{{=request.application}}/static/jquery.jqGrid.js"
type="text/javascript"></script>
<script src="/{{=request.application}}/static/js/jqModal.js"
type="text/javascript"></script>
<script src="/{{=request.application}}/static/js/jqDnR.js" type="text/
javascript"></script>


Controller
========
def myview():
return dict()

def function1():
response.headers["Content-Type"]="text/xml"
#start the XML data set
mystr = "<?xml version='1.0' encoding='utf-8'?><rows><page>1</
page><total>1</total><records>10</records>"

#get the data from the database
records = db.executesql("SELECT TOP 10 col1, col2, col3 FROM
tbl1") #MS SQL Server

#build XML from dataset
for row in records:
mystr = mystr + "<row id ='" +str(row.col1) + "'>"
mystr = mystr + '<cell>' + str(row.col1) + '</cell>'
mystr = mystr + '<cell>' + str(row.col2) + '</cell>'
mystr = mystr + '<cell>' + str(row.col3) + '</cell>'
mystr = mystr + '</row>'
mystr = mystr +'</rows>'

return mystr





Hope that helps.

Mike

> > > Ed- Hide quoted text -
>
> - Show quoted text -

[ed]

Hi Mike,
I would like to thank you for the example source code. The first
web2py & jqGrid integration source code. This a great help for those
who are interested in this JQuery plugin.
Regards,
Ed

[ed]

Hi,
I changed data format from JSON to XML and still the problem persist.
Table and headings are displayed but no data.I basically copied Mike's
code and did some tweaking. Ran the code but no data is displayed. I
checked Firebug, Console, Response and the data retrieved from the
server is:
<?xml version='1.0' encoding='utf-8'?><rows><page>1</page><total>5</
total><records>10</records><row id
= 063D268><cell>063D268</cell><cell>UGOT</cell><cell>IRMA</
cell><cell>VERSOZA</cell><cell>Languages
& Literature</cell><cell>5/14/1937</cell><cell></cell></row><row id =
031D163><cell>031D163</cell
><cell>MCINERNEY</cell><cell>MICHAEL</cell><cell>.</cell><cell>Physics</cell><cell>11/25/1948</cell>
<cell></cell></row></rows>

I also checked Firefox, Tools, Error Console and this was displayed:
Error: not well-formed
Source File: http://127.0.0.1:8000/admin/default/edit/EMIS/views/employee%5Cmyview.html
Line: 49, Column: 106
Source Code:

<?xml version='1.0' encoding='utf-8'?><rows><page>1</

page><total.........

I checked the XML format of the result but found nothing wrong; sorry,
I am not an XML expert. The following is the code.
Controllers
---------------
def myview():
return dict()

def getdata():

response.headers["Content-Type"]="text/xml"
#start the XML data set
mystr = "<?xml version='1.0' encoding='utf-8'?><rows><page>1</

page><total>5</total><records>10</records>"
records=db().select(db.empmast.empno, db.empmast.lname,
db.empmast.fname, db.empmast.mname, db.empmast.costcenter,
db.empmast.bdate, db.empmast.sssno)

#build XML from dataset
for row in records:

mystr = mystr + '<row id = ' + str(row.empno) + '>'
mystr = mystr + '<cell>' + str(row.empno) + '</cell>'
mystr = mystr + '<cell>' + str(row.lname) + '</cell>'
mystr = mystr + '<cell>' + str(row.fname) + '</cell>'
mystr = mystr + '<cell>' + str(row.mname) + '</cell>'
mystr = mystr + '<cell>' + str(row.costcenter) + '</cell>'
mystr = mystr + '<cell>' + str(row.bdate) + '</cell>'
mystr = mystr + '<cell>' + str(row.sssno) + '</cell>'

mystr = mystr + '</row>'
mystr = mystr +'</rows>'
return mystr

Views
-----------
{{extend 'mylayout.html'}}
<!-- In head section we should include the style sheet for the grid --
>
<link href="{{=URL(r=request,c='static',f='jqGrid34/themes/sand/
grid.css')}}" rel="stylesheet" type="text/css" media="screen" />
<link href="{{=URL(r=request,c='static',f='jqGrid34/themes/
jqModal.css')}}" rel="stylesheet" type="text/css" media="screen
<!-- Of course we should load the jquery library -->

<script src="{{=URL(r=request,c='static',f='jqGrid34/jquery.js')}}"
type="text/javascript"></script>
<!-- and at end the jqGrid Java Script file -->
<script src="{{=URL(r=request,c='static',f='jqGrid34/
jquery.jqGrid.js')}}" type="text/javascript"></script>

<script src="{{=URL(r=request,c='static',f='jqGrid34/js/
jqModal.js')}}" type="text/javascript"></script>
<script src="{{=URL(r=request,c='static',f='jqGrid34/js/jqDnR.js')}}"

type="text/javascript"></script>
<script type="text/javascript">

// We use a document ready jquery function.
$(document).ready(function(){
$('#list2').jqGrid({
imgpath:'/{{=request.application}}/static/themes/sand/images',
url:'/EMIS/employee/getdata',
dataType:'xml',

mtype:'GET',
height:'100%',

// colNames parameter is a array in which we describe the names
// in the columns. This is the text that appear in the head of the
grid.

colNames:['Emp. No.','Last Name', 'First Name', 'Mid Name', 'Cost
Center', 'SSS No.'],
colModel:[
{name:'empno',index:'empno', width:80},
{name:'lname',index:'lname', width:160},

{name:'fname',index:'fname asc, lname', width:160},
{name:'mname',index:'mname', width:160},
{name:'costcenter',index:'costcenter', width:200},
{name:'sssno',index:'sssno', width:80}],
pager:jQuery('#pager2'),
rowNum:10,
rowList:[10,20,30],
sortname:'empno',
viewrecords:false,
sortorder:'asc',
caption:'Employees Personal File'
}).navGrid('#pager2', {edit:false, add:false, del:false});
});
</script>
</head>
<body>
<!-- the grid definition in html is a table tag with class 'scroll' --
>
<table id="list2" class="scroll"></table>
<!-- pager definition. class scroll tels that we want to use the same
theme as grid -->
<div id="pager2" class="scroll" style="text-align:center;"></div>
</body>
</html>
---------------------------------

I've seen some examples that define XMLreader, could this be what I
need to include in the code? I am not sure 'cuz it also says that if i
put "xml" in datatype option you don't need xmlreader. What do you
think? Thanks in advance.
Cheers,

Ed

On Mar 25, 9:46 pm, Mike <michael.mcgreg...@gmail.com> wrote:

[maffiou]

Hey Ed,

I'm using this on my website and it works fine...
I'll dig into it a bit tonight and will try to come up with a minimal
source code exemple for you.

M.