jQuery UI Widgets › Forums › Grid › Grid
Tagged: angular grid, blank, data, grid, JAVA, JavaServer Pages, jquery grid, jqxgrid, JSP, mysql
This topic contains 6 replies, has 2 voices, and was last updated by Dimitar 9 years, 2 months ago.
-
AuthorGrid Posts
-
hi,
I tried all your Grid demos(Jsp with Mysql) its not working for me page is totally blank in JSP, please help.
JSP Code:
<%@ 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″>
<%@ page import=”java.sql.*”%>
<%@ page import=”com.google.gson.*”%>
<%
// (A) database connection
// “jdbc:mysql://localhost:3306/northwind” – the database url of the form jdbc:subprotocol:subname
// “dbusername” – the database user on whose behalf the connection is being made
// “dbpassword” – the user’s password
Class.forName(“com.mysql.jdbc.Driver”);
Connection dbConnection = DriverManager.getConnection(“jdbc:mysql://localhost:3306/northwind”,”root”,”abc123″);
// (B) retrieve necessary records from database
Statement getFromDb = dbConnection.createStatement();
ResultSet employees = getFromDb
.executeQuery(“SELECT EmployeeID, FirstName, LastName, Title, BirthDate FROM employees”);
// (C) format returned ResultSet as a JSON array
JsonArray recordsArray = new JsonArray();
while (employees.next()) {
JsonObject currentRecord = new JsonObject();
currentRecord.add(“EmployeeID”, new JsonPrimitive(employees.getString(“EmployeeId”)));
currentRecord.add(“FirstName”, new JsonPrimitive(employees.getString(“FirstName”)));
currentRecord.add(“LastName”, new JsonPrimitive(employees.getString(“LastName”)));
currentRecord.add(“Title”, new JsonPrimitive(employees.getString(“Title”)));
currentRecord.add(“BirthDate”, new JsonPrimitive(employees.getString(“BirthDate”)));
recordsArray.add(currentRecord);
}
// (D)
out.print(recordsArray);
out.flush();
%>
<title>Insert title here</title>
</head>
<body>
</body>
</html>HTML:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Grid Test</title>
<link type=”text/css” rel=”Stylesheet” href=”D:\css\jqx.base.css” />
<script type=”text/javascript” src=”D:\js\jquery.js”></script>
<script type=”text/javascript” src=”D:\js\jqxcore.js”></script>
<script type=”text/javascript” src=”D:\js\jqxdata.js”></script>
<script type=”text/javascript” src=”D:\js\jqxbuttons.js”></script>
<script type=”text/javascript” src=”D:\js\jqxscrollbar.js”></script>
<script type=”text/javascript” src=”D:\js\jqxmenu.js”></script>
<script type=”text/javascript” src=”D:\js\jqxcheckbox.js”></script>
<script type=”text/javascript” src=”D:\js\jqxlistbox.js”></script>
<script type=”text/javascript” src=”D:\js\jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”D:\js\jqxgrid.js”></script>
<script type=”text/javascript” src=”D:\js\jqxgrid.selection.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var source = {
datatype: “json”,
datafields: [{
name: ‘FirstName’,
type: ‘string’
}, {
name: ‘LastName’,
type: ‘string’
}, {
name: ‘Title’,
type: ‘string’
}, {
name: ‘BirthDate’,
type: ‘date’
}],
id: ‘EmployeeID’,
url: ‘select-data.jsp’,
async: true
};
var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid({
width: 550,
autoheight: true,
source: dataAdapter,
columns: [{
text: ‘First Name’,
datafield: ‘FirstName’,
width: 100
}, {
text: ‘Last Name’,
datafield: ‘LastName’,
width: 100
}, {
text: ‘Title’,
datafield: ‘Title’,
width: 180
}, {
text: ‘Birth Date’,
datafield: ‘BirthDate’,
cellsformat: ‘d’,
align: ‘right’,
cellsalign: ‘right’
}]
});
});
</script>
</head>
<body>
<div id=”jqxgrid”></div>
</body>
</html>Thanks in advance…
Regards,
M.ZHi M.Z,
Are there any errors thrown in your browser’s console? Please make sure you have configured your application environment as described in the tutorial Configure MySQL, Eclipse and Tomcat for Use with jQWidgets.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/hi Dimitar,
There no errors but grid is totally empty.
select-data.jsp file is displaying data, but in HTML page grid is empty zero rows.
Hi M.Z,
Did you follow the instructions of the tutorial? Are you sure your files are ran on the server and you are not simply opening the HTML page with the grid?
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/hi Dimitar,
I followed tutorial without missing anything. Yes, i’m running files on the server(Apache Tomcat)
As per jqwidgets’s Grid demo there are two files 1) select-data.jsp 2) HTML file1) In select-data.jsp is displaying data in resultSet as a JSON array format.
2) In HTML file it is just showing empty grid with column names without any rows in it. I guess some binding issue in the code.hi Dimitar,
Appreciate if you could access my system thru Ammyy/Teamviewer.
Please let me know so, that i can give you access details.Waiting for your reply…Thanks in advance….
Hi mohammad,
As you can see from our live Java integration demos, the code from the tutorials works perfectly fine. If you wish, you can check for binding errors in your page by implementing the data adapter’s loadError callback (more information).
Unfortunately, we can provide you with support only here or by email (if you are a licensed customer).
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.