2011-12-09 17 views
1

誰かが私を正しい方向に向けることを望みます。jqGridにJavaサーブレットのJSONデータが設定されていません

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テーブルを移入しませjqGrid & JSON(リンクの一部)に関連する他の多くの記事を閲覧しています

jqGrid not displaying JSON data

しかし、私の問題に対する答えを見つけることができませんでした。

基本的には、ログファイル(日付と時刻情報付き)からイベントのリストを読み込み、jqGridに表示します。

これは私の設定です:

[1]私のサーブレットは、(私はjsonlintを経由して、それを検証)コンソール上に出力

@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); 
    } 

スニペット:

# 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]私の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}); }); 

私のJavascriptからも分かるように、私はサーバーから送信されているjsonに対応するテストjsonデータを持っています。私は本当に、テーブル内のデータページにできることについては気にしない http://tinypic.com/r/15s7dyx/5

:テストデータがレンダリングされても問題は(スクリーンショットを参照)を持っていません。私はちょうど5分ごとにデータを表示し更新できるようにしたい。基本的なデータが表示されたら更新を行います。

助けてください。 ありがとうございます。あなたがHTMLページ上で直接グリッドを埋めるために使用される必要があるデータを配置する場合

答えて

0

あなたはHTML本体の内側に

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

を使用しないでください。データ

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

あなたのJavaScriptコードで正しく読み取ることはできません。その代わりに、ページの先頭に含めることができる

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

のようなものは、場合グローバル変数が設定されます(window.mygriddata)と頭の中で以下の置かれ、他のJavaScriptコードで使用することができます。ちなみに上記の割り当てはの初期化です。JSONデータは、以下のような文字列です:

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

声明var mygriddata = {"total":"1","page":"1",...}直接文字列オブジェクトではなく定義されています。だから、ちょうど今、あなたは、グリッドを埋めるためにdatatype:'jsonstring'datastr: mygriddataを使用することができますJavaScriptの構文とキャブ

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

としてコードを書き換える従うことができます。 datastrの値は、文字列またはオブジェクトのいずれかです。あなたの代わりに、オブジェクトの初期化のJSONを使用したい場合コードが含まれるように変更する必要があり'${userdata}上:

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

あなたがdatatype:'json'を使うとAjaxあたりのサーブレットからJSONデータを取得したい場合は、サーバーのコードは書くべきではありません正しいサーバの応答HttpServletResponseの体が、さらに、少なくともapplication/jsonにレスポンスヘッダのContent-Type設定:

aResponse.setContentType("application/json"); 

は、私は、Javaを使用していないので、私はより多くのサーバーのコードであなたを助けることができません。

+0

こんにちは@Oleg - あなたの迅速な対応に感謝します。あなたの応答に関してちょっとしたコメントがあります。私は、JSPで

userdata = ${userdata}
を確実にするために、次のものを含めました。 – adrnola

+0

@adrnola:OK、意味は「

userdata = ${userdata}
」です。 Firebugを使用している間は、本体を見るだけでなく、HTTPヘッダーも参照してください。特に「Content-Type」は非常に重要です。可能性のあるエラーを表示するためにグリッドに 'loadError'ハンドルを追加することをお勧めします。詳細については、[答え](http://stackoverflow.com/a/6969114/315935)を参照してください。 – Oleg

関連する問題