jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

Getting a simple file example to run jqGrid

16/04/2010
20:02

DavidT

Member

Members

Forum Posts: 10

Member Since:
16/04/2010

Offline

I am trying to get the very basics of this running first and from the wiki the most simple would be:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DT.....t;>
<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>

<script src="http://ajax.googleapis.com/aja....." type="text/javascript"></script>

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

I don't know what is wrong with this. I do have the css and js files on my server but after not getting it running online I'm hoping to just see the most basic working example possible to get started.

Is there something obviously wrong?

Thanks

16/04/2010
21:38

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

It will not work of course.

My first thing here is how you represent the xml string.

I'm sure this will work if you do this:

var mystr =
"<?xml version='1.0' encoding='utf-8'?>
<invoices>
    <rows>
        <row>
            <cell>1</cell>
            <cell>2010-03-01</cell>
            <cell>3</cell>
            <cell>4</cell>
            <cell>5</cell>
            <cell>data6</cell>
        </row>
    </rows>
</invoices>";

Regards

Tony

Edit: sorry not well formated

Add after every ne line

i.e.

var mystr =
"<?xml version='1.0' encoding='utf-8'?>\\
<invoices>\\
    <rows>\\
        <row>\\
            <cell>1</cell>\\
            <cell>2010-03-01</cell>\\
            <cell>3</cell>\\
            <cell>4</cell>\\
            <cell>5</cell>\\
            <cell>data6</cell>\\
        </row>\\
    </rows>\\
</invoices>";

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.

16/04/2010
21:52

DavidT

Member

Members

Forum Posts: 10

Member Since:
16/04/2010

Offline

Ok, I've had no success with the above and still don't know why it works but I do have the My First Grid running though not 100%.

The jqGrid appears but none of the data. The jquery script used is the same as in the Wiki but with my own xml file to run it so I think I may have something wrong there.

My xml file is:

<?xml version ="1.0" encoding="utf-8"?>
<rows>
<page>1</page>
<total>1</total>
<records>10</records>
<row id='1'>
      <cell>1</cell>
      <cell>02/07/1905</cell>
      <cell>103.98</cell>
      <cell>45.34</cell>
      <cell>149.32</cell>
      <cell>This is record 1</cell>
</row>
<row id='2'>
      <cell>2</cell>
      <cell>01/07/1905</cell>
      <cell>104.98</cell>
      <cell>46.34</cell>
      <cell>151.32</cell>
      <cell>This is record 2</cell>
</row>
<row id='3'>
      <cell>3</cell>
      <cell>30/06/1905</cell>
      <cell>105.98</cell>
      <cell>47.34</cell>
      <cell>153.32</cell>
      <cell>This is record 3</cell>
</row>
<row id='4'>
      <cell>4</cell>
      <cell>29/06/1905</cell>
      <cell>106.98</cell>
      <cell>48.34</cell>
      <cell>155.32</cell>
      <cell>This is record 4</cell>
</row>
<row id='5'>
      <cell>5</cell>
      <cell>28/06/1905</cell>
      <cell>107.98</cell>
      <cell>49.34</cell>
      <cell>157.32</cell>
      <cell>This is record 5</cell>
</row>
<row id='6'>
      <cell>6</cell>
      <cell>27/06/1905</cell>
      <cell>108.98</cell>
      <cell>50.34</cell>
      <cell>159.32</cell>
      <cell>This is record 6</cell>
</row>
<row id='7'>
      <cell>7</cell>
      <cell>26/06/1905</cell>
      <cell>109.98</cell>
      <cell>51.34</cell>
      <cell>161.32</cell>
      <cell>This is record 7</cell>
</row>
<row id='8'>
      <cell>8</cell>
      <cell>25/06/1905</cell>
      <cell>110.98</cell>
      <cell>52.34</cell>
      <cell>163.32</cell>
      <cell>This is record 8</cell>
</row>
<row id='9'>
      <cell>9</cell>
      <cell>24/06/1905</cell>
      <cell>111.98</cell>
      <cell>53.34</cell>
      <cell>165.32</cell>
      <cell>This is record 9</cell>
</row>
<row id='10'>
      <cell>10</cell>
      <cell>23/06/1905</cell>
      <cell>112.98</cell>
      <cell>54.34</cell>
      <cell>167.32</cell>
      <cell>This is record 10</cell>
</row>
</rows>

Is there something wrong with this?

The jqGrid displays saying Page 0.

16/04/2010
22:22

Preichow

Member

Members

Forum Posts: 13

Member Since:
24/03/2010

Offline

Ahhh….when I added the slash after each XML line, Davidt's original code then worked fine. I'm going on a limb here, but maybe if you added that slash after each line in your longer XML datafile that might solve that too?

Can anyone explain why the solves it?

PS: I also noticed that you are pulling in jQuery twice: once through Google (version 1.4.2), and then Version 1.3.2 through Triand. I imagine you don't need the google include.

PPS: Can you confirm you were using this documentation page? http://www.trirand.com/jqgridw.....a#xml_data

16/04/2010
22:49

DavidT

Member

Members

Forum Posts: 10

Member Since:
16/04/2010

Offline

Thanks Tony!

That xml string is working now - great.

16/04/2010
22:51

DavidT

Member

Members

Forum Posts: 10

Member Since:
16/04/2010

Offline

Is it an error then in the Wiki here > http://www.trirand.com/jqgridw.....xml_string

I did try the backslash in th xml file but no luck. Not sure if it's to do with the page, total and record, or that it is mixxing the <invoice> or a similar item but will test it a bit more.

Thanks

17/04/2010
01:38

Preichow

Member

Members

Forum Posts: 13

Member Since:
24/03/2010

Offline

DavidT said:

Is it an error then in the Wiki here > http://www.trirand.com/jqgridw.....xml_string

I did try the backslash in th xml file but no luck. Not sure if it's to do with the page, total and record, or that it is mixxing the <invoice> or a similar item but will test it a bit more.

Thanks

You sure that your XML data is formatted correctly?

I'm assuming the entire XML string was placed inside of double quotes when assigned to a variable? And if so, should the double quotes in the first line to single quotes to match the sample? I'm not sure if it matters, but sometimes little things like that do.

I'm wondering if the <rows> tag should be moved down three lines so it's placed just before the true row data? I'm not 100% certain on that, but that's how the example seems to be set up.

17/04/2010
11:00

DavidT

Member

Members

Forum Posts: 10

Member Since:
16/04/2010

Offline

I'm not entirely sure it's formatted right but I am trying to following the Wiki here > http://www.trirand.com/jqgridw.....first_grid

The XML String is working fine, but not when using an external xml file which I've outline above.

Based on the WIki, my full code has:

The Wiki showed a mix of " and ' in the XML file which I had but I've moved it all to " with the jQuery code above showing the file enclosed in '. The Wiki had example.php but I don't use PHP so I'm not sure if that affects things like the mtype option.

Is there something missing or not right here? The jqGrid does load but with no data.

<script type="text/javascript">
jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    url:'example.php',
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    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: '#pager',
    rowNum:10,
    rowList:[10,20,30],
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    caption: 'My first grid'
  }); 
}); 
</script>

17/04/2010
16:08

DavidT

Member

Members

Forum Posts: 10

Member Since:
16/04/2010

Offline

I have this working now - all sorted.

The issue really was the text in the XML which must be wrapped in <![CDATA[ ....]]>

As I don't use PHP I had to skip this part of the Wiki example, and it wasn't completely clear on that though I did find it covered elsewhere in the Wiki.

Thanks

David

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
70 Guest(s)

Currently Browsing this Page:
1 Guest(s)