javascript - The jqgrid cannot read the json with the error -


i new jqgrid , javascript. need develop jqgrid loading data database. but, seems it's not work , cannot find out error of problem.... please me...please....

in index.jsp

<%@ page language="java" contenttype="text/html; charset=iso-8859-1"     pageencoding="iso-8859-1"%> <!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="text/html; charset=iso-8859-1">      <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>   <link rel="stylesheet" type="text/css" href="/css/result-light.css">  <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">   <link rel="stylesheet" type="text/css" href="/css/normalize.css">   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script>     <script type='text/javascript' src="http://trirand.com/blog/jqgrid/js/jquery.jqgrid.min.js"></script>       <script type='text/javascript' src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>   <title>next page</title> <script type="text/javascript">  $(document).ready(function(){          jquery('#list10').jqgrid({              url:'griddata.jsp',             mtype:'post',             datatype: 'json',         colnames:['inv no','date', 'client'],             colmodel:[{name:'id',index:'id', width:55},{name:'invdate',index:'invdate', width:90},{name:'name',index:'name', width:1000}],           rownum:10,         pager: '#pager10',         sortname: 'id',         viewrecords: true,            multiselect: false,         jsonreader : {             root: 'rows',             page: 'page',             total: 'total',             records: 'records',          },         loadcomplete: function () {             alert('ok');         },         loaderror: function (jqxhr, textstatus, errorthrown,error) {             alert('http status code: ' + jqxhr.status + '\n' +                     'textstatus: ' + textstatus + '\n' +                     'error: ' + error + '\n' +                   'errorthrown: ' + errorthrown);              alert('http message body (jqxhr.responsetext): ' + '\n' + jqxhr.responsetext);          },         caption: 'abc'              });          jquery('#list10').jqgrid('navgrid','#pager10',{add:false,edit:false,del:false});             }//function         );//ready         </script>  </head> <body>   <table id="list10"></table> <div id="pager10"></div> <table id="list10_d"></table> <div id="pager10_d"></div> </body> </html>  

in griddate.jsp

<%@ page language="java" contenttype="text/html; charset=iso-8859-1"     pageencoding="iso-8859-1"%> <!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="text/html; charset=iso-8859-1"> <title>insert title here</title> </head> <body> <%@ page import="java.sql.*,java.util.arraylist,net.sf.json.*" %>  <%@ page import="java.io.filewriter" %> <%@ page import="java.io.ioexception" %> <%@ page import="org.json.simple.jsonarray" %> <%@ page import="org.json.simple.jsonobject" %> <%@ page import="java.io.filenotfoundexception" %> <%@ page import="java.io.filereader" %> <%@ page import="java.util.iterator" %> <%@ page import="org.json.simple.parser.jsonparser" %> <%@ page import="org.json.simple.parser.parseexception" %> <%@ page import = "org.json.*" %>   <%@ page import="java.sql.*,java.util.arraylist,net.sf.json.*" %> <%         string rows=request.getparameter("rows");          string pageno=request.getparameter("page");         string cpage=pageno;          connection connect = null;         statement statement = null;         preparedstatement preparedstatement = null;         resultset rs= null;         class.forname("com.mysql.jdbc.driver").newinstance();         connect = drivermanager.getconnection("jdbc:mysql://localhost:3306/emstest?user=root&password=000000");         statement = connect.createstatement();         rs = statement.executequery("select account_id, account_number, rec_create_id tbl_account");     //system.out.print(rs);         int count=0;         rs.last();         count=rs.getrow();           int  pageval=0;         pageval=(count/integer.parseint(rows));          int limitstart=0;          limitstart=(integer.parseint(rows)*integer.parseint(pageno))-integer.parseint(rows);         int total=count/integer.parseint(rows);         string totalrow=string.valueof(total+1);          rs = statement.executequery("select account_id, account_number, rec_create_id tbl_account limit "+limitstart+","+rows);             jsonobject responcedata=new jsonobject();         net.sf.json.jsonarray cellarray=new net.sf.json.jsonarray();           responcedata.put("total",totalrow);         responcedata.put("page",cpage);         responcedata.put("records",count);          net.sf.json.jsonarray cell=new net.sf.json.jsonarray();         net.sf.json.jsonobject cellobj=new net.sf.json.jsonobject();          int i=1;        while(rs.next())            {                 cellobj.put("id",rs.getstring(1));                 cell.add(rs.getstring(1));                 cell.add(rs.getstring(2));                 cell.add(rs.getstring(3));          cellobj.put("cell",cell);         cell.clear();         cellarray.add(cellobj);         i++;        }         responcedata.put("rows",cellarray);         out.println(responcedata);         system.out.println(responcedata);   %>   </body> </html> 

the json griddate.jsp

{"total":"1","page":"1","records":7,"rows":[{"id":"41","cell":["41","gd20131109","admin123"]},{"id":"42","cell":["42","zh20131109","admin123"]},{"id":"43","cell":["43","nt001","admin123"]},{"id":"44","cell":["44","987654","admin123"]},{"id":"45","cell":["45","testing feb","admin123"]},{"id":"46","cell":["46","gd20131111","admin123"]},{"id":"47","cell":["47","zh135421","admin123"]}]} 

and got these error message (i cannot post pic...)

1)

http status code:200 textstatus: parsererror 

2)

http message body(jqxhr.responsetext):  <%@ page language="java" contenttype="text/html; charset=iso-8859-1"     pageencoding="iso-8859-1"%> <!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="text/html; charset=iso-8859-1"> <title>insert title here</title> </head> <body> {"total":"1","page":"1","records":7,"rows":[{"id":"41","cell":["41","gd20131109","admin123"]},{"id":"42","cell":["42","zh20131109","admin123"]},{"id":"43","cell":["43","nt001","admin123"]},{"id":"44","cell":["44","987654","admin123"]},{"id":"45","cell":["45","testing feb","admin123"]},{"id":"46","cell":["46","gd20131111","admin123"]},{"id":"47","cell":["47","zh135421","admin123"]}]} </body> </html> 

you need return raw json data in http server response. data can't inside of <body> of html page. http response should set contenttype header application/json. i'm not java developer, simple searching in internet shows use org.json.jsonobject example generate (see code of page2.jsp the question , corresponding answer). see the answer too.


Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

android - Keyboard hides my half of edit-text and button below it even in scroll view -

css - Make div keyboard-scrollable in jQuery Mobile? -