Show Posts
Solution : i was using url in both ajax and in datagrid function, so , i passed the jason to the loadJsonToGrid(resultData) and data:resultData
please see the fixed files.
Updated Code :
index.jsp
Code:
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@page import="com.bfpl.db.DbHandler"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.ResultSet"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Logger : Dash board</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" type="text/css"></link>
<link rel="stylesheet" href="dataGrid/css/demo.css" type="text/css"></link>
<link rel="stylesheet" href="dataGrid/css/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="dataGrid/css/icon.css" type="text/css"></link>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="dataGrid/js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="dataGrid/js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="scripts/editableGrid.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script> <!-- for file upload-->
</head>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"><aspan>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Data Logger - Maker</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Java</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"> inp</li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<!-- panel start -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Data Logger - File upload</h3>
</div>
<!-- panel body starts -->
<div class="panel-body">
<%
ResultSet rs = DbHandler.selectFromDb("SELECT DISTINCT [vehicle_no] FROM [BFPL].[dbo].[DATALOGGER_TEMP_REPORT]");
%>
<script>
$(function() {
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
});
});
</script>
<script>
function loadDataToGrid(){
var postData = $('#frmShowReport').serialize();
$.ajax({
type:'post',
data:postData,
url:'TemperateReportServlet',
success: function(data){
$('#sta').html("loading please wait....");
loadJsonToGrid(data);
$('#sta').html("Done");
},
error:function(err){
$('#sta').html(err);
}
});
}
/*code to create datagrid for temperature report*/
function loadJsonToGrid(jsonData){
//var newUrl = 'localhost:8080/DataLogger/TemperateReportServlet?'+jsonData;
$('#tt').datagrid({
title:'Temperature Report',
iconCls:'icon-edit',
width:1024,
height:500,
singleSelect:true,
data: jsonData,
url: '',
columns:[[
{field:'rowId',title:'Row ID',width:60},
{field:'time_stamp',title:'Time Stamp',width:80,align:'right',editor:'numberbox'},
{field:'location',title:'Location',width:180,editor:'text'},
{field:'temp_real',title:'Temp Real',width:80,align:'right',editor:'numberbox'},
{field:'temp_fixed',title:'Temp fixed',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},
{field:'status',title:'Status',width:50,align:'center',
editor:{
type:'checkbox',
options:{
on: 'P',
off: ''
}
}
},
{field:'action',title:'Action',width:80,align:'center',
formatter:function(value,row,index){
if (row.editing){
var s = '<a href="#" onclick="saverow(this)">Save</a> ';
var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
return s+c;
} else {
var e = '<a href="#" onclick="editrow(this)">Edit</a> ';
var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
return e+d;
}
}
}
]],
onBeforeEdit:function(index,row){
row.editing = true;
updateActions(index);
},
onAfterEdit:function(index,row){
row.editing = false;
updateActions(index);
},
onCancelEdit:function(index,row){
row.editing = false;
updateActions(index);
}
});
}
function updateActions(index){
$('#tt').datagrid('updateRow',{
index: index,
row:{}
});
}
function getRowIndex(target){
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target){
$('#tt').datagrid('beginEdit', getRowIndex(target));
}
function deleterow(target){
$.messager.confirm('Confirm','Are you sure?',function(r){
if (r){
$('#tt').datagrid('deleteRow', getRowIndex(target));
}
});
}
function saverow(target){
$('#tt').datagrid('endEdit', getRowIndex(target));
}
function cancelrow(target){
$('#tt').datagrid('cancelEdit', getRowIndex(target));
}
function insert(){
var row = $('#tt').datagrid('getSelected');
if (row){
var index = $('#tt').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#tt').datagrid('insertRow', {
index: index,
row:{
status:'P'
}
});
$('#tt').datagrid('selectRow',index);
$('#tt').datagrid('beginEdit',index);
}
</script>
<div class="form-group">
<form id="frmShowReport" role="form" method="post">
<label for="inputfile">Vehicle</label>
<select id="selVehicle" name="vehicleNo">
<option value="select" >--select--</option>
<%while(rs.next()){
String vhNo = rs.getString("vehicle_no").toString();
out.print("<option value='"+vhNo+"' >"+ vhNo+ "</option>");
} %>
</select>
<label for="tempMin">Temp(min)</label>
<input type="text" name="tempMin" size="30">
<label for="tempMax">Temp(max)</label>
<input type="text" size="30" name="tempMax">
<label for="startDate">Start Date</label>
<input type="text" name="startDate" id="startDate" size="30" class="datepicker">
<label for="endDate">End Date</label>
<input type="text" size="30" name="endDate" id="endDate" class="datepicker">
<p class="help-block"><em>Upload xls format files only.</em></p>
<input type="button" class="btn btn-danger" name="submit" value="Show Report" onclick="loadDataToGrid()"/>
</form>
</div>
<!-- ajax form submit begins -->
<!-- ajax form submit ends -->
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
</div><!-- panel body ends -->
</div><!-- primary panel ends -->
<br/> <br/>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Data uploaded</h3>
</div>
<div class="panel-body">
<a href="#" class="btn-sm btn-default" onclick="insert()">Insert Row</a>
<!-- editable data grid starts here -->
<table id="tt"></table>
<!-- editable data grid ends here -->
</div><!-- panel body ends -->
</div><!-- panel ends -->
<div id="sta">*</div>
</div><!-- container div ends -->
</body>
</html>
TemperateReportServlet
Code:
package com.bfpl.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.util.Date;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.SQLException;
import java.sql.Statement;
import java.text.Format;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.simple.JSONArray;
import org.json.simple.JSONObject;
public class TemperateReportServlet extends HttpServlet {
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
}
public JSONObject jObj=new JSONObject();
//this mehtod will take three parameter
//vehicleNo,startDate,endDate
@SuppressWarnings("unchecked")
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("application/json");
response.setHeader("Cache-Control", "nocache");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String vehicleNo = null;
java.sql.Date startDate = null;
java.sql.Date endDate = null;
String sd = request.getParameter("startDate").toString();
String ed = request.getParameter("endDate").toString();
try {
SimpleDateFormat format = new SimpleDateFormat("dd/MM/yyyy");
java.util.Date sParsed = format.parse(sd);
java.util.Date eParsed = format.parse(ed);
startDate = new java.sql.Date(sParsed.getTime());
endDate = new java.sql.Date(eParsed.getTime());
} catch (ParseException e) {
e.printStackTrace();
}
vehicleNo = request.getParameter("vehicleNo").toString();
if(startDate==null||endDate==null){
jObj.put("success", false);
jObj.put("vehileNo", vehicleNo );
jObj.put("startDate", startDate);
jObj.put("endDate", endDate);
}else{
jObj.put("success", true);
jObj.put("vehicleNo", vehicleNo);
jObj.put("startDate", startDate.toString());
jObj.put("endDate", endDate.toString());
createReport(vehicleNo,startDate,endDate);
}
out.print(jObj);
out.flush();
out.close();
}
private void createReport(String vehicleNo, Date startDate, Date endDate) {
Connection con = com.bfpl.db.DbHandler.getConnection();
String query = "SELECT time_stamp,location,temp_real,temp_fixed " +
"FROM DATALOGGER_TEMP_REPORT " +
"Where vehicle_no = '"+vehicleNo+"' AND time_stamp BETWEEN '"+startDate+"' AND '"+endDate+"' " ;
//String query = "SELECT time_stamp, location, temp_real, temp_fixed, FROM DATALOGGER_TEMP_REPORT WHERE vehicle_no = 'HR 55J 1980'";
try {
Statement stmt = con.createStatement();
ResultSet rs = stmt.executeQuery(query);
jObj.put("rows" , convert(rs));
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public static JSONArray convert( ResultSet rs ) throws SQLException
{
JSONArray jArray = new JSONArray();
ResultSetMetaData rsmd = rs.getMetaData();
int numColumns = rsmd.getColumnCount();
int k=1;
while(rs.next()) {
JSONObject obj = new JSONObject();
for (int i=1; i<numColumns+1; i++) {
String column_name = rsmd.getColumnName(i);
if(rsmd.getColumnType(i)==java.sql.Types.ARRAY){
obj.put("rowId", k);
obj.put(column_name, rs.getArray(column_name));
}
else if(rsmd.getColumnType(i)==java.sql.Types.BIGINT){
obj.put("rowId", k);
obj.put(column_name, rs.getInt(column_name));
}
else if(rsmd.getColumnType(i)==java.sql.Types.BOOLEAN){
obj.put("rowId", k);
obj.put(column_name, rs.getBoolean(column_name));
}
else if(rsmd.getColumnType(i)==java.sql.Types.BLOB){
obj.put("rowId", k);
obj.put(column_name, rs.getBlob(column_name));
}
else if(rsmd.getColumnType(i)==java.sql.Types.DOUBLE){
obj.put("rowId", k);
obj.put(column_name, rs.getDouble(column_name));
}
else if(rsmd.getColumnType(i)==java.sql.Types.FLOAT){
obj.put("rowId", k);
obj.put(column_name, rs.getFloat(column_name));
}
else if(rsmd.getColumnType(i)==java.sql.Types.INTEGER){
obj.put("rowId", k);
obj.put(column_name, rs.getInt(column_name));
}
else if(rsmd.getColumnType(i)==java.sql.Types.NVARCHAR){
obj.put("rowId", k);
obj.put(column_name, rs.getNString(column_name));
}
else if(rsmd.getColumnType(i)==java.sql.Types.VARCHAR){
obj.put("rowId", k);
obj.put(column_name, rs.getString(column_name));
}
else if(rsmd.getColumnType(i)==java.sql.Types.TINYINT){
obj.put("rowId", k);
obj.put(column_name, rs.getInt(column_name));
}
else if(rsmd.getColumnType(i)==java.sql.Types.SMALLINT){
obj.put("rowId", k);
obj.put(column_name, rs.getInt(column_name));
}
else if(rsmd.getColumnType(i)==java.sql.Types.DATE){
obj.put("rowId", k);
obj.put(column_name, rs.getDate(column_name));
}
else if(rsmd.getColumnType(i)==java.sql.Types.TIMESTAMP){
obj.put("rowId", k);
obj.put(column_name, rs.getTimestamp(column_name).toString());
}
else{
obj.put("rowId", k);
obj.put(column_name, rs.getObject(column_name));
}
}
jArray.add(obj);
k++;
}
return jArray;
}
public String getServletInfo() {
return "This is my default servlet created by Eclipse";
}
}
