0

I am new for jqgrid and javascript. I need to develop a jqgrid for loading the data from the database. But, it seems that it's not work and I cannot find out the error of the problem.... Please help 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 FROM 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 FROM 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 from 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 I got these error message (I cannot post the 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>
Kelvin CHAN
  • 3
  • 2

1 Answers1

0

You need return raw JSON data in the HTTP server response. The data can't be inside of the <body> of HTML page. The HTTP response should set ContentType header to application/json. I'm not a Java developer, but simple searching in internet could shows that you use org.json.JSONObject for example to generate (see the code of Page2.jsp from the question and the corresponding answer). See the answer too.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798