问题
I'm writing a web app. First I'll Explain the process, followed by code and finally the problem.
I've 2 identical jsps, index.jsp and GetCaseData.jsp
Here there are 2 buttons one in the top and the other at the bottom. and initially, the second button is disabled
When I hit the Get case Button. the data from database gets fetched into the textboxes(GetCaseData.jsp) and the submit box gets enabled and the getcase gets disabled.
When I hit submit, the data gets saved to another table in DB
Below are the codes.
Index.jsp
<%@page import="org.bean.UserBean"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="myCssFile.css">
<title>Insert title here</title>
<script type="text/javascript">
function enableSubmit() {
document.getElementById("getCase").disabled = true;
document.getElementById("submitButton").disabled = false;
}
function enableGetCase() {
document.getElementById("getCase").disabled = false;
document.getElementById("submitButton").disabled = true;
}
</script>
</head>
<body>
<div class="header" id="header">
<form id="form1"></form>
</div>
<div class="bodytag">
<form method="get" action="GetData">
<input type="Submit" value="Get Case" name="getCase" id="getCase"
onclick="enableSubmit()" />
<table>
<tr>
<td>Case Number</td>
<td><input id="Text1" type="text" value="" /></td>
<td>Case Owner</td>
<td><input id="Text6" type="text" value="" /></td>
</tr>
<tr>
<td>Source</td>
<td><input id="Text2" type="text" /></td>
<td>Status</td>
<td><input id="Text7" /></td>
</tr>
<tr>
<td class="auto-style2">Issue</td>
<td class="auto-style2"><input id="Text3" value="" type="text" /></td>
<td class="auto-style2">Reason</td>
<td class="auto-style2"><input id="Text8" value="" type="text" /></td>
</tr>
<tr>
<td>Date/Time Opened</td>
<td><input id="Text4" type="text" value="" /></td>
<td>Age(Days)</td>
<td><input id="Text10" type="text" value="" /></td>
</tr>
<tr>
<td>Resolution</td>
<td><select id="Select1" name="D1">
<option></option>
</select></td>
<td>Final Status</td>
<td><select id="Select2" name="D2">
<option value=" "></option>
</select></td>
</tr>
<tr>
<td>Start Time</td>
<td><input id="Text5" type="text" value="Start Time" /></td>
<td>End Time</td>
<td><input id="Text9" type="text" value="end Time" /></td>
</tr>
</table>
<input type="button" value="Submit" name="submitButton"
id="submitButton" disabled="disabled" onClick="enableGetCase()" />
</form>
</div>
<script type="text/javascript" src="SampleJS.js"></script>
</body>
Servlet
package org.servlet;
import org.DAO.*;
import org.bean.UserBean;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/GetData")
public class GetData extends HttpServlet {
private static final long serialVersionUID = 1L;
public GetData() {
super();
}
GetDataDAO getdatadao = null;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// set content type
try {
getdatadao = new GetDataDAO();
List<UserBean> userBeans = getdatadao.list();
request.setAttribute("userBeans", userBeans);
request.getRequestDispatcher("GetCaseData.jsp").forward(request, response);
} catch (Exception e) {
e.printStackTrace();
}
}
}
GetDataDAO
package org.DAO;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.ResultSetMetaData;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;
import org.bean.UserBean;
import org.code.general.DBConnection;
public class GetDataDAO {
DBConnection dbConnection = new DBConnection();
public List<UserBean> list() throws Exception {
List<UserBean> userBeans = new ArrayList<UserBean>();
try {
String userName = new com.sun.security.auth.module.NTSystem().getName();
System.out.println(userName);
Connection conn = dbConnection.getConn();
Statement stmt = dbConnection.getStmt();
ResultSet rs = dbConnection.getRs();
String excelPath = dbConnection.getExcelPath();
String queryString = null;
dbConnection.createClassForNameForExcel();
conn = DriverManager.getConnection(
"jdbc:odbc:Driver={Microsoft Excel Driver (*.xls)};DBQ=" + excelPath + "; READONLY=FALSE;");
System.out.println("Connecting to database…");
System.out.println("Oracle JDBC Driver Registered!");
if (conn != null) {
System.out.println("You made it, take control your database now!");
} else {
System.out.println("Failed to make connection!");
}
stmt = conn.createStatement();
queryString = "Select * from [report1448039568905$] where STATE IS NULL";
rs = stmt.executeQuery(queryString);
ResultSetMetaData rsmd = rs.getMetaData();
// int rowCount = rsmd.getColumnCount();
System.out.println("bno of cols are " + rsmd.getColumnCount());
while (rs.next()) {
UserBean userBean = new UserBean();
userBean.setCaseNumber(rs.getString(1));
userBean.setCaseOwner(rs.getString(2));
userBean.setStatus(rs.getString(4));
userBean.setIssue(rs.getString(5));
userBean.setReason(rs.getString(6));
userBean.setDateOpened(rs.getString(7));
userBean.setAge(rs.getInt(8));
userBeans.add(userBean);
}
rs.close();
conn.commit();
conn.close();
} catch (Exception e) {
e.printStackTrace();
}
return userBeans;
}
}
SampleJS.js
$(window).load(
function() {
$("#form1").on(
'submit',
function(e) {
$.ajax({
type : "get",
url : "GetTheCounts",
data : $(this).serialize(),
success : function(msg) {
console.log(JSON.stringify(msg));
var $span = $('<span class="totalTime">')
.appendTo($('#header'));
$span.append("Status: (Worked/Total) -")
.append("\t\t\t\t\t").append(
msg.DAOCount).append("/")
.append(msg.excelCount);
var $span1 = $('<span class="effeciency">')
.appendTo($('#header'));
$span1.append("Effeciency : ").append(
msg.effeciency);
}
});
e.preventDefault();
}).submit();
});
GetCaseData.jsp
<%@page import="org.bean.UserBean"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@page import="java.util.*"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="myCssFile.css">
<script type="text/javascript">
function enableSubmit() {
document.getElementById("getCase").disabled = true;
document.getElementById("submitButton").disabled = false;
}
function enableGetCase() {
document.getElementById("getCase").disabled = false;
document.getElementById("submitButton").disabled = true;
}
function dynamicdropdown(listindex) {
document.getElementById("subcategory").length = 0;
switch (listindex) {
case "closed":
document.getElementById("subcategory").options[0] = new Option(
"Please select framework", "");
document.getElementById("subcategory").options[1] = new Option(
"Closed", "Closed");
document.getElementById("subcategory").options[2] = new Option(
"Cash Apps/Financial Processing",
"Cash Apps/Financial Processing");
break;
case "open":
document.getElementById("subcategory").options[0] = new Option(
"Please select framework", "");
document.getElementById("subcategory").options[1] = new Option(
"Waiting For BLUP", "Waiting For BLUP");
document.getElementById("subcategory").options[2] = new Option(
"Waiting for Clarification from Rep",
"Waiting for Clarification from Rep");
document.getElementById("subcategory").options[3] = new Option(
"Waiting for Supervisor Assistance",
"Waiting for Supervisor Assistance");
document.getElementById("subcategory").options[4] = new Option(
"Need to route the case to Cash Apps/FP",
"Need to route the case to Cash Apps/FP");
document.getElementById("subcategory").options[5] = new Option(
"Waiting for Approval", "Waiting for Approval");
document.getElementById("subcategory").options[6] = new Option(
"Send Updated Invoice", "Send Updated Invoice");
break;
case "reassigned":
document.getElementById("subcategory").options[0] = new Option(
"Please select framework", "");
document.getElementById("subcategory").options[1] = new Option(
"Assigned to other agent", "Assigned to other agent");
document.getElementById("subcategory").options[2] = new Option(
"Assigned to other queue", "Assigned to other queue");
break;
}
return true;
}
var date = Date.parse(new Date());
function getLastDate() {
var date = new Date();
document.getElementById("endTime").value = [ date.getMonth() + 1,
date.getDate(), date.getFullYear() ].join('/')
+ ' '
+ [ date.getHours(), date.getMinutes(), date.getSeconds() ]
.join(':');
setTimeout(function() {
document.getElementById("myForm").submit();
}, 3000);
}
</script>
</head>
<body>
<div class="header" id="header">
<form id="form1"></form>
</div>
<div class="bodytag">
<form method="post" id="myForm" action="PostData">
<%
Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("MM/dd/yyyy HH:mm:ss");
String startFormattedDate1 = sdf.format(date);
Date d1 = sdf.parse(startFormattedDate1);
date = new Date();
String startFormattedDate2 = sdf.format(date);
%>
<input type="Submit" value="Get Case" name="getCase" id="getCase"
disabled="disabled" />
<table>
<tr>
<td>Case Number</td>
<td><input id="caseNumber" name="caseNumber" type="text"
value="${userBeans[0].getCaseNumber()}" /></td>
<td>Case Owner</td>
<td><input id="caseOwner" name="caseOwner" type="text"
value="${userBeans[0].getCaseOwner()}" /></td>
</tr>
<tr>
<td>Source</td>
<td><input id="source" name="source" type="text" /></td>
<td>Status</td>
<td><input id="status" name="status" type="text"
value="${userBeans[0].getStatus()}" /></td>
</tr>
<tr>
<td class="auto-style2">Issue</td>
<td class="auto-style2"><input id="issue" name="issue"
value="${userBeans[0].getIssue()}" type="text" /></td>
<td class="auto-style2">Reason</td>
<td class="auto-style2"><input id="reason" name="reason"
value="${userBeans[0].getReason()}" type="text" /></td>
</tr>
<tr>
<td>Date/Time Opened</td>
<td><input id="dateOpened" type="text" name="dateOpened"
value="${userBeans[0].getDateOpened()}" /></td>
<td>Age(Days)</td>
<td><input id="age" type="text" name="age"
value="${userBeans[0].getAge()}" /></td>
</tr>
<tr>
<td>Resolution</td>
<td><select id="Select1" name="resolution"
onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="" disabled selected>Select</option>
<option value="closed" id="closed">Closed</option>
<option value="open" id="open">Open</option>
<option value="reassigned" id="reassigned">Reassigned</option>
</select></td>
<td>Final Status</td>
<td><select name="finalStatus" id="subcategory">
<option value="" disabled selected>Please select
framework</option>
</select></td>
</tr>
<tr>
<td>Start Time</td>
<td><input id="startTime" type="text" name="startDate"
value="<%=startFormattedDate1%>" /></td>
<td>End Time</td>
<td><input id="endTime" name="endDate" type="text" /></td>
</tr>
</table>
<input type="button" value="Submit Form" onclick="getLastDate()"
id="postData" name="postData" />
</form>
</div>
<script type="text/javascript" src="SampleJS.js"></script>
</body>
</html>
The problem is this program doesn't run fine in Chrome, but in FireFox and Eclipse default browser it works fine.
In Chrome, only the toggling of buttons happen. Enable and disabling of both the buttons. There is no data fetched into textboxes or there is no submission to DB done.
Below are the screenshots of Chrome and FF after I click the Get Case button.
Chrome O/P:
FireFox O/P:
来源：https://stackoverflow.com/questions/35741749/webapp-not-working-only-in-chrome-but-working-in-firefox-and-eclipse-default-br