how to populate jqGrid table using json

0
votes

I am creating a jqgrid from the json string "http://www.ok-soft-gmbh.com/jqGrid/John.txt"

I wrote the JavaScript similar to "http://www.ok-soft-gmbh.com/jqGrid/John.htm" and url pointing to the john.txt file.

It is giving me a table without any rows. please help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Demonstration how to read simple JSON text</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/redmond/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/css/ui.jqgrid.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/i18n/grid.locale-en.js"></script>
    <script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/js/jquery.jqGrid.min.js"></script>

        <script type="text/javascript">
        //<![CDATA[
            jQuery(document).ready(function () {
                $('#jqgrid').jqGrid({
                    url: 'http://www.ok-soft-gmbh.com/jqGrid/John.txt',
                    datatype: 'json',
                    colNames: ['Col1', 'Col2', 'Col3'],
                    colModel: [
                        { name: 'col1' },
                        { name: 'col2' },
                        { name: 'col3' }
                    ],
                    jsonReader: { repeatitems: false },
                    height: 'auto'
                });
                });
        //]]>
        </script>
    </head>
    <body>
        <table id="jqgrid"><tr><td/></tr></table>
    </body>
    </html>

this is what my code is...
and this is what I am getting

http://tinypic.com/view.php?pic=vqps1x&s=6

2
jqueryjsonjqgrid
You should post your exact code. My old demo works. So to be able to understand your problem one should know your code. – Oleg
please find the code I tried – Vishnudev K

2 Answers

1
votes

First of all you should be careful with the usage of url in the form "http://www.ok-soft-gmbh.com/jqGrid/John.txt″ because of Same Origin Policy restrictions. You can use ajax requests only for data from the same web site. So to prevent this you should use url without protocol, domain and port prefix. Here since the data you are trying to access is from another domain you are unable to pass it directly to the url parameter. The solution for this is that you have to use your own json data to assign or your own domain url to get the data from. Or you could set a local variable with the json data and assign it to the jqGrid

1
votes

I think its because, you are making an ajax request for a resource which is in another domain.

Try this, save the given below data to a file John.txt and change your URL to point this

url: 'John.txt', 

{
    "total": 2,
    "page": 1,
    "records": 12,
    "rows": [
        {
            "id": "1",
            "col1": "cell11",
            "col2": "cell12",
            "col3": "cell13" 
        },
        {
            "id": "2",
            "col1": "cell21",
            "col2": "cell22",
            "col3": "cell23" 
        } 
    ] 
}