jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

example Grid don't show

05/01/2009
10:38

maggie

Member

Members

Forum Posts: 49

Member Since:
17/12/2008

Offline

Hello,

I am trying to set up my first grid following the tutorial example. I use jsp and servlet. I can see xml from running the servlet directly: http://localhost:8080/ReportsP.....t/testGrid

But it is empty page when I run the jsp page. Here are the codes:

JSP Page -

<html>
<head>
  <title>jqGrid Demo</title>
  <link rel="stylesheet" type="text/css" media="screen"
   href="jquery/themes/basic/grid.css" />
  <link rel="stylesheet" type="text/css" media="screen"
   href="jquery/themes/jqModal.css" />
  <script src="jquery/jquery.js" type="text/javascript"></script>
  

  <script src="jquery/js/grid.base.js" type="text/javascript"></script>
  <script src="jquery/js/grid.subgrid.js" type="text/javascript"></script>


  <script src="jquery/js/jqModal.js" type="text/javascript"></script>
  <script src="jquery/js/jqDnR.js" type="text/javascript"></script>
  <script type="text/javascript">
  jQuery(document).ready(function(){
      jQuery("#list").jqGrid({
           url:'http://localhost:8080/ReportsP.....d',
           datatype: 'xml',
           mtype: 'GET',
           colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
           colModel :[
              {name:'invid', index:'invid', width:55},
              {name:'invdate', index:'invdate', width:90},
              {name:'amount', index:'amount', width:80, align:'right'},
                    {name:'tax', index:'tax', width:80, align:'right'},
                    {name:'total', index:'total', width:80, align:'right'},
                    {name:'note', index:'note', width:150, sortable:false} ],
                pager: jQuery('#pager'),
                rowNum:10,
                rowList:[10,20,30],
                sortname: 'invid',
                sortorder: "desc",
                viewrecords: true,
                imgpath: 'jquery/themes/basic/images',
                caption: 'My first grid'
            });
         });
         </script>
</head>
<body>
  <table id="list" class="scroll"></table>
  <div id="pager" class="scroll" style="text-align: center;"></div>
  <p>test!</p>
</body>
</html>

Servlet Codes:

public class TestJqGridServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException {

try {

   String pageString = StringUtils.defaultIfEmpty(request
     .getParameter("page"), "1");
   long page = 1;//Long.parseLong(pageString, 10);

   String limitString = StringUtils.defaultIfEmpty(request
     .getParameter("rows"), "10");
   long limit = Long.parseLong(limitString, 10);

   String sidxString = StringUtils.defaultIfEmpty(request.getParameter("sidx"), "1");
   System.out.println("sidxString: " + sidxString);
   long sidx = Long.parseLong(sidxString, 2);


   String sorder = StringUtils.defaultIfEmpty(request
     .getParameter("sord"), "ASC");

   long count = fetchCount(connection(request));


   long total_pages = 0;
   if (count > 0)
    total_pages = 1;//(long) Math.ceil(count / limit);
   if (page > total_pages)
    page =total_pages;

long start = limit * page - limit;

if (start < 0)
start = 0;

   response.setContentType("text/xml");
   PrintWriter out = response.getWriter();

   out.println("<?xml version=\\"1.0\\" encoding=\\"utf-8\\"?>");
   out.println("<rows>");
   out.println("<page>" + page + "</page>");
   out.println("<total>" + total_pages + "</total>");
   out.println("<records>" + count + "</records>");

ResultSet rows = fetchRows(connection(request), sidx, sorder, start, limit);

while (rows.next()) {

    out.println("<row id='" + rows.getInt("invid") + "'>");
    out.println("<cell>" + rows.getInt("invid") + "</cell>");
    out.println("<cell>" + rows.getDate("invdate") + "</cell>");
    out.println("<cell>" + rows.getDouble("amount") + "</cell>");
    out.println("<cell>" + rows.getDouble("tax") + "</cell>");
    out.println("<cell>" + rows.getDouble("total") + "</cell>");
    out.println("<cell><![CDATA[" + rows.getString("note")
      + "]]></cell>");
    out.println("</row>");
   }

   out.println("</rows>");


  } catch (Exception e) {
   System.out.println(e.getMessage());
   throw new ServletException("Grid generation Failure", e);
  }


}

private Connection connection(HttpServletRequest request) {

  Connection connection=(Connection) request
   .getAttribute(ConnectionProviderFilter.CONNECTION_ATTR);
  System.out.println(connection.toString());
  return connection;

}

private long fetchCount(Connection connection) throws SQLException {

  long count = 0;
  PreparedStatement stmt = null;
  ResultSet results = null;

try {

stmt = connection
.prepareStatement("SELECT COUNT(*) AS count FROM invheader");

results = stmt.executeQuery();

   while (results.next()) {
    count = results.getLong("count");
   }

return count;
} finally {

   if (results != null) {
    try {
     results.close();
    } catch (SQLException e) {
     ;
    }
    results = null;
   }

   if (stmt != null) {
    try {
     stmt.close();
    } catch (SQLException e) {
     ;
    }
    stmt = null;
   }

}
}

private ResultSet fetchRows(Connection connection, long sidx, String sord,
long start, long limit) {

  PreparedStatement stmt = null;
  ResultSet results = null;
  try {

   StringBuilder sql = new StringBuilder();
   sql.append("SELECT * FROM ");
   sql.append("(SELECT ROW_NUMBER() OVER(ORDER BY " + "invid" + " "
     + sord + ") AS rownum");
   sql
     .append(", invid, invdate, amount, tax,total, note FROM invheader) ");
   sql.append(" AS invheader1");
   sql.append(" WHERE rownum>=" + start);
   sql.append(" AND rownum<=" + limit);

stmt = connection.prepareStatement(sql.toString());

results = stmt.executeQuery();

  } catch (SQLException e) {
   ;
  }

return results;
}

}

The xml as below is displayed when running the servlet

<?xml version="1.0" encoding="utf-8" ?>
<rows>
<page>1</page>
<total>1</total>
<records>3</records>
<row id="1">
<cell>1</cell>
<cell>2008-12-01</cell>
<cell>10.0</cell>
<cell>0.2</cell>
<cell>10.2</cell>
<cell>
<![CDATA[ test
]]>
</cell>
</row>
<row id="2">
<cell>2</cell>
<cell>2008-12-02</cell>
<cell>20.0</cell>
<cell>0.4</cell>
<cell>20.4</cell>
<cell>
<![CDATA[ null
]]>
</cell>
</row>
<row id="3">
<cell>3</cell>
<cell>2008-12-01</cell>
<cell>15.0</cell>
<cell>0.3</cell>
<cell>15.3</cell>
<cell>
<![CDATA[ more
]]>
</cell>
</row>
</rows>

I use IE 7.

Any help will be highly appreciated!

Thanks!

Maggie

06/01/2009
11:12

maggie

Member

Members

Forum Posts: 49

Member Since:
17/12/2008

Offline

Hello,

I am still trying to figure out the grid display problem as described above. I thought there might be two problems:

1. XML response from the server. But I don't see problem with it yet.

2. Pathing to the javascript. I commented out this:

And use this instead-
<script src="jquery/js/grid.base.js" type="text/javascript"></script>
<script src="jquery/js/grid.subgrid.js" type="text/javascript"></script>

Is there a problem with it?

I checked the script jquery.jqGrid.js. I am not sure what combinedIncludeURL is for, and what is combine.php. I use java/JSP. do I need to have a jsp equivalent page of combine.php?

var combinedIncludeURL = "combine.php?type=javascript&files=";

Thanks!

Maggie

06/01/2009
14:46

maggie

Member

Members

Forum Posts: 49

Member Since:
17/12/2008

Offline

I finally got it working- grid is diplayed with correct data!

I had to fix the path to the js.

I used this in the jsp:

and configured jquery.jqGrid.js file by setting

var

pathtojsfiles = "jquery/js/";

Thanks!

Maggie

16/05/2009
21:32

marpas

New Member

Members

Forum Posts: 2

Member Since:
17/05/2009

Offline

I have your same problem...

I am trying to set up my first grid following the tutorial example. I use jsp and servlet. I can see xml from running the servlet directly: http://localhost:8084/JqgridTe.....ridServlet

But it is empty page when I run the jsp page.

I used this in the jsp:

and configured jquery.jqGrid.js file by setting

var pathtojsfiles = “assets/js/”;

I don't see also color header grid and images....

Could you help me?

20/05/2009
12:16

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

Please use FireBug to detect if all the needed files are loded.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

24/05/2009
12:47

marpas

New Member

Members

Forum Posts: 2

Member Since:
17/05/2009

Offline

thanks .. problem solved .. some files were not loaded!

Marco

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
66 Guest(s)

Currently Browsing this Page:
1 Guest(s)