CODEWITHSUNDEEP
jqueryjsonjqgrid
Vishnudev K
Vishnudev K

Reputation: 2934

how to populate jqGrid table using json

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

Upvotes: 0

Views: 2101

Answers (2)

Kris
Kris

Reputation: 1902

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" 
        } 
    ] 
}

Upvotes: 1

Ajo Koshy
Ajo Koshy

Reputation: 1225

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

Upvotes: 1

Related Questions