0

i am using JAX-RS with JQGrid. Now i am getting the Json data from server but i want to display it in the JQGrid table format. i have applied JQGrid table but content from the server is not displaying in the table.

This is my Json data from the server

[{"country":"US","id":61,"name":"mahabali"},{"country":"america","id":63,"name":"swamy"},{"country":"hjj","id":64,"name":"fg"},{"country":"hjj","id":65,"name":"fg"},{"country":"hjj","id":66,"name":"fg"}]

This is my HTML page

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title><center>My First Grid</center></title>

<link rel="stylesheet" type="text/css" media="screen" href="../css/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/ui.jqgrid.css" />

<style type="text/css">
html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
}
</style>

<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../js/grid.locale-en.js" type="text/javascript"></script>
<script src="../js/jquery.jqGrid.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(function () {
    $("#list").jqGrid({
        url: "http://localhost:8080/jsf_jaxrs/webapi/persons/add",
        datatype: "local",
        mtype: "GET",
        colNames: ["Country", "Id", "Name"],
        colModel: [
            { name: "country", width: 300, align: "right"},
            { name: "id", width: 300, align: "right"},
            { name: "name",  width: 300, align: "right"}
        ],
        pager: '#pager',
        rowNum:10,
        rowList:[10,20,30],
        sortname: 'id',
        sortorder: 'desc',
        height: '300',
        loadonce: true,
        caption: 'My first grid',
        sortable: true
    }); 
}); 
</script> 
</head>
<body>
    <table id="list"><tr><td></td></tr></table> 
    <div id="pager"></div> 
</body>
</html>
kukis
  • 4,489
  • 6
  • 27
  • 50
Channabasava Gorebal
  • 3
  • 4
  • You use `datatype: "local"` instead of `datatype: "json"`. If you want that jqGrid make Ajax call and loads the JSON data from `url` then you have to change `datatype`. – Oleg Aug 23 '15 at 11:22
  • Ya i changed datatype to local but no use. can u suggest how to load json data in jqgrid means that is there any other way to load json data? – Channabasava Gorebal Aug 23 '15 at 12:18
  • There are **many different ways** to load the data. Description of all possibilities is too long. So you should specify more clear what you implemented already. Is URL `"/jsf_jaxrs/webapi/persons/add"` return JSON data which you included? Which fork of jqGrid you use ([free jqGrid](https://github.com/free-jqgrid/jqGrid), [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or old jqGrid in version <=4.7) and in which version? – Oleg Aug 23 '15 at 12:59
  • i think 'url' is not hitting means it is not loading. but i don't understand why it is not loading.....please give some suggestions to display the json data in JQGrid table – Channabasava Gorebal Aug 25 '15 at 11:41
  • Sorry, but you should answer questions (see my previous comment) if you want that one helps you. For example, do you use `"http://localhost:8080/` prefix in URL. If you loads the data from *the same* web site then you can use *relative path* like `"/jsf_jaxrs/webapi/persons/add"`. If you try to load the data from *foreign* web site that it will not work with `datatype: "json"` because of security reason and one have to use `datatype: "jsonp"` and have the corresponding support of JSONP on the server side. Moreover you included JSON data from the server, but now you write: 'url' is not hitting – Oleg Aug 25 '15 at 12:24
  • If i run '/http://localhost:8080/jsf_jaxrs/webapi/persons/add' in browser it showing values in json format but if i use same url in JQGrid, content is not displaying – Channabasava Gorebal Aug 27 '15 at 04:17
  • It gives almost no information. There are exist restrictions of loading data **via Ajax**. See [here](https://en.wikipedia.org/wiki/Same-origin_policy) for example. Opening of URL in web browser don't have the restriction. I recommend you to use [Fiddler](http://www.telerik.com/fiddler) or Developer Tools of IE/Chrome to trace HTTP traffic. I recommend additionally to add `loadError` callback to jqGrid. See [the answer](http://stackoverflow.com/a/6969114/315935) for more details. Moreover you didn't answer any from my questions, I still don't know which version of jqGrid you use. – Oleg Aug 27 '15 at 05:02

1 Answers1

0

I tried validating your code in this JSFiddle with local data option. Your HTML and JS code seems to be fine. I think the issue could be either while loading the JSON data or while loading JS/CSS resources. Please check for any errors in the browser console.

<title>
    <center>My First Grid</center>
</title>
<body>
    <table id="list">
        <tr>
            <td></td>
        </tr>
    </table>
    <div id="pager"></div>
</body>


$(function () {
var mydata = [{
    "country": "US",
        "id": 61,
        "name": "mahabali"
}, {
    "country": "america",
        "id": 63,
        "name": "swamy"
}, {
    "country": "hjj",
        "id": 64,
        "name": "fg"
}, {
    "country": "hjj",
        "id": 65,
        "name": "fg"
}, {
    "country": "hjj",
        "id": 66,
        "name": "fg"
}];


$("#list").jqGrid({
    data: mydata,
    datatype: "local",
    colNames: ["Country", "Id", "Name"],
    colModel: [{
        name: "country",
        width: 300,
        align: "right"
    }, {
        name: "id",
        width: 300,
        align: "right"
    }, {
        name: "name",
        width: 300,
        align: "right"
    }],
    pager: '#pager',
    rowNum: 10,
    rowList: [10, 20, 30],
    sortname: 'id',
    sortorder: 'desc',
    height: '300',
    loadonce: true,
    caption: 'My first grid',
    sortable: true
});
});
Tarun Gupta
  • 1,629
  • 1
  • 22
  • 39