CODEWITHSUNDEEP
javajsonservletsjqgrid
adrnola
adrnola

Reputation: 45

jqGrid not being populated with JSON data from Java Servlet

Hopefully someone will be able to point me in the right direction.

I have already browsed the many other posts relating to jqGrid & json not populating the jqGrid table (some of the links):

jqGrid - Table not being populated by data from json request

jgGrid not displaying json data

JSON and jqGrid. What is "userdata"?

jqGrid with JSON data renders table as empty

jqGrid not displaying JSON data

but could not find an answer to my problem.

Basically what I am trying to do is read a list of events from a log file (with date and time info) and display in the jqGrid.

This is my setup:

[1] My Servlet snippet

@Override
    protected void doGet(HttpServletRequest aRequest,
            HttpServletResponse aResponse, Hashtable aQueryData,
            LocaleData aLocale) throws ServletException, IOException {

        System.out.println("doGet(): Received Request: " + aRequest.getServletPath());

        // jqGrid expects the JSON data in a predefined format:
        //      { 
        //            "total": "xxx", 
        //            "page": "yyy", 
        //            "records": "zzz",
        //            "rows" : [
        //              {"id" :"1", "cell" :["cell11", "cell12", "cell13"]},
        //              {"id" :"2", "cell":["cell21", "cell22", "cell23"]},
        //                ...
        //            ]
        //      }


        // Calling getLogEntries() method populates logEntries & logEntriesCnt.
        // logEntries contains the "rows" data as specified above.
            // For now I am testing with 10 rows of data.
        getLogEntries(aLocale);

        JSONObject jqGridData = new JSONObject();
        jqGridData.put("total", "1");
        jqGridData.put("page", "1");
        jqGridData.put("records", String.valueOf(logEntriesCnt-1));
        jqGridData.put("rows", logEntries);

        System.out.println("\n\n# Event Log Entries (" + new Date() + "):" + (logEntriesCnt-1));
        System.out.println("jqGrid JSON: \n" + jqGridData.toJSONString());

        aRequest.setAttribute("userdata", jqGridData.toJSONString());

        aRequest.getRequestDispatcher("/jsp/eventlogtest.jsp").forward(aRequest, aResponse);
    }

The output on the console (I validated it via jsonlint):

# Event Log Entries (Fri Dec 09 11:02:25 GMT 2011):10
jqGrid JSON: 
{"total":"1","page":"1","records":"10","rows":[{"id":"1","cell":["09\/12\/11","11:01:52","Communication Established"]},{"id":"2","cell":["09\/12\/11","11:01:52","Monitoring Started"]},{"id":"3","cell":["09\/12\/11","10:50:55","Communication Established"]},{"id":"4","cell":["09\/12\/11","10:50:55","Monitoring Started"]},{"id":"5","cell":["09\/12\/11","10:36:57","Communication Established"]},{"id":"6","cell":["09\/12\/11","10:36:57","Monitoring Started"]},{"id":"7","cell":["09\/12\/11","10:30:58","Communication Established"]},{"id":"8","cell":["09\/12\/11","10:30:58","Monitoring Started"]},{"id":"9","cell":["09\/12\/11","10:21:58","Communication Established"]},{"id":"10","cell":["09\/12\/11","10:21:58","Monitoring Started"]}]}

[2] My JSP

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

  <meta http-equiv="Content-Type" content="application/json">

  <link type="text/css" rel="stylesheet" href="/styles/cupertino/jquery-ui-1.8.14.custom.min.css">
  <link type="text/css" rel="stylesheet" href="/styles/ui.jqgrid.css">

  <script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script>
  <script type="text/javascript" src="/js/jquery-ui-1.8.14.custom.min.js"></script>

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

  <script type="text/javascript" src="/js/eventlog.min.js"></script>  

  <title>jqGrid Test</title>
</head>
<body>
    <h1>jqGrid Test</h1>

    <form id="formpageform" action="/eventlog" name="eventlogviewerform" method="post">

        <div id="logEntries">
            userdata = ${userdata}
        </div>

        <br/>
        <br/>

        <table id="tableGrid"></table>
        <div id="tablePager"></div>

        <br/>
        <br/>

    </form>
</body>
</html>

I output the userdata to the screen and again validated the json is correct. Firebug does not have any errors. Here is a link to the screen-shot that I see when page is rendered: http://tinypic.com/r/acrgus/5

Firebug Console - Parameters:

_search false
nd  1323429509833
page    1
rows    10
sidx    dateentry
sord    asc

Firebug Console - Response:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

  <meta http-equiv="Content-Type" content="application/json">

  <link type="text/css" rel="stylesheet" href="/styles/cupertino/jquery-ui-1.8.14.custom.min.css">
  <link type="text/css" rel="stylesheet" href="/styles/ui.jqgrid.css">

  <script type="text/javascript" src="/js/jquery-1.5.2.min.js"></script>
  <script type="text/javascript" src="/js/jquery-ui-1.8.14.custom.min.js"></script>

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

  <script type="text/javascript" src="/js/eventlog.min.js"></script>  

  <title>jqGrid Test</title>
</head>
<body>
    <h1>jqGrid Test</h1>

    <form id="formpageform" action="/eventlog" name="eventlogviewerform" method="post">

        <div id="logEntries">
            userdata = {"total":"1","page":"1","records":"10","rows":[{"id":"1","cell":["09\/12\/11","11:18:13","Communication Established"]},{"id":"2","cell":["09\/12\/11","11:18:13","Monitoring Started"]},{"id":"3","cell":["09\/12\/11","11:01:52","Communication Established"]},{"id":"4","cell":["09\/12\/11","11:01:52","Monitoring Started"]},{"id":"5","cell":["09\/12\/11","10:50:55","Communication Established"]},{"id":"6","cell":["09\/12\/11","10:50:55","Monitoring Started"]},{"id":"7","cell":["09\/12\/11","10:36:57","Communication Established"]},{"id":"8","cell":["09\/12\/11","10:36:57","Monitoring Started"]},{"id":"9","cell":["09\/12\/11","10:30:58","Communication Established"]},{"id":"10","cell":["09\/12\/11","10:30:58","Monitoring Started"]}]}
        </div>

        <br/>
        <br/>

        <table id="tableGrid"></table>
        <div id="tablePager"></div>

        <br/>
        <br/>

    </form>
</body>
</html>

Firebug Console - HTML:

jqGrid Test
userdata = {"total":"1","page":"1","records":"10","rows":[{"id":"1","cell":["09\/12\/11","11:18:13","Communication Established"]},{"id":"2","cell":["09\/12\/11","11:18:13","Monitoring Started"]},{"id":"3","cell":["09\/12\/11","11:01:52","Communication Established"]},{"id":"4","cell":["09\/12\/11","11:01:52","Monitoring Started"]},{"id":"5","cell":["09\/12\/11","10:50:55","Communication Established"]},{"id":"6","cell":["09\/12\/11","10:50:55","Monitoring Started"]},{"id":"7","cell":["09\/12\/11","10:36:57","Communication Established"]},{"id":"8","cell":["09\/12\/11","10:36:57","Monitoring Started"]},{"id":"9","cell":["09\/12\/11","10:30:58","Communication Established"]},{"id":"10","cell":["09\/12\/11","10:30:58","Monitoring Started"]}]}

[3] My JavaScript:

$(document).ready(function(){

    // Test Data: All entries double quoted
    var userdatatest1 = 
        {
            "total":"1",
            "page":"1",
            "records":"10",
            "rows":[
            {"id":"1","cell":["08\/12\/11","21:09:19","Communication Established"]},
            {"id":"2","cell":["08\/12\/11","21:09:19","Monitoring Started"]},
            {"id":"3","cell":["08\/12\/11","21:02:47","Communication Established"]},
            {"id":"4","cell":["08\/12\/11","21:02:47","Monitoring Started"]},
            {"id":"5","cell":["08\/12\/11","20:51:40","Communication Established"]},
            {"id":"6","cell":["08\/12\/11","20:51:40","Monitoring Started"]},
            {"id":"7","cell":["08\/12\/11","20:33:24","Communication Established"]},
            {"id":"8","cell":["08\/12\/11","20:33:24","Monitoring Started"]},
            {"id":"9","cell":["08\/12\/11","20:23:06","Communication Established"]},
            {"id":"10","cell":["08\/12\/11","20:23:06","Monitoring Started"]}]
        };


    // jqGrid Options: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
    // Pager Options: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:pager
    $("#tableGrid").jqGrid({
        url:'/eventlogjqgrid',
        datatype:'jsonstring',
        //datastr: userdatatest1,
        colNames:['Date', 'Time', 'Event'],
        colModel:[ 
                {name:'dateentry',index:'dateentry',width:150,align:"left",sortable:false,editable:false}, 
                {name:'timeentry',index:'timeentry',width:150,align:"left",sortable:false,editable:false} ,
                {name:'evententry',index:'evententry',width:400,align:"left",sortable:false,editable:false}
        ],
        rowNum:10,
        rowList:[10,20,30],
        sortname:'dateentry',
        sortorder:'asc',
        pager: jQuery('#tablePager'),
        viewrecords: true,
        caption: 'Event Log'
    }); 

    jQuery("#tableGrid").jqGrid('navGrid', '#tablePager', {edit:false, add:false, del:false, search:false, refresh:false});

});

As you can see from my Javascript. I have test json data that corresponds to the json being sent from server. The test data has no problem being rendered (see screen-shot): http://tinypic.com/r/15s7dyx/5

I don't really mind about being able to page the data in the table. I just want to be able display the data and update it every 5 mins. I will do the updates once I get the basic data to display.

Any help appreciated. Thanks in advance.

Upvotes: 1

Views: 4036

Answers (1)

Oleg
Oleg

Reputation: 221997

If you place the data which need be used to fill the grid directly on the HTML page you should not use

<div id="logEntries">
    userdata = ${userdata}
</div>

inside of the HTML body. The data

<div id="logEntries">
    userdata = {"total":"1","page":"1",...}
</div>

can't be good read by your JavaScript code. Instead of that you can include in the head of the page something like

<script type="text/javascript">
    var mygriddata = {"total":"1","page":"1",...};
</script>

In the case the global variable will be set (window.mygriddata) and can be used by other JavaScript code placed below in the head. By the way the assignment above is initializing. The JSON data are string like the following:

var mygriddata = '{"total":"1","page":"1",...}';

The statement var mygriddata = {"total":"1","page":"1",...} defines directly object and not a string. So you can just follow the JavaScript syntax and cab rewrite the code as

<script type="text/javascript">
    var mygriddata = {
        total: "1",
        page: "1"//, ...
    };
</script>

Now you will be able to use datatype:'jsonstring' and datastr: mygriddata to fill the grid. The value of datastr can be either string or object. If you want use JSON instead of object initialization you code should be modified to include ' over ${userdata}:

<div id="logEntries">
    userdata = '${userdata}'
</div>

If you want to use datatype:'json' and get the JSON data from servlet per Ajax, the server code should not write the correct body of the server response HttpServletResponse but additionally at least set the Content-Type of the response header to application/json:

aResponse.setContentType("application/json");

I don't use Java, so I can't help you in the server code more.

Upvotes: 0

Related Questions