CRUD operations in Employee management using Spring, jQuery, Ajax, JSTL, JDBC, MySQL, Maven and developed using Eclipse IDE

In this example  we are seeing how to develop CRUD (Create, Read, Update and Delete) operation application using technologies Java, spring, JSP, JSTL, JDBC, MySQL, Ajax, jQuery and Maven. Application is developed using eclipse IDE. In this example all operations are performed on Employee basic properties like employee number, first name, last name and department name. Application main aim is adding employee details to DB using user interface, and performing multiple operations like update, viewing and deleting.

Below, find the Test cases and flow of the application.

Create Employee Query:

CREATE TABLE `employee` (

  `EMP_NO` int(11) DEFAULT NULL,

  `FIRST_NAME` varchar(30) DEFAULT NULL,

  `LAST_NAME` varchar(30) DEFAULT NULL,

  `DEPT_NAME` varchar(30) DEFAULT NULL

);

Insert Employee Query:

insert into employee values(1,'Gurugubelli','G','Technology');

insert into employee values(2,'Gurugubelli','Tech','Developer');

insert into employee values(3,'Employee','E','Dept 1');

Project Structure:

Required dependencies(Java libraries) :

pom.xml

	<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.gurugubelli</groupId>
	<artifactId>spring-jquery-ajax-example</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<packaging>war</packaging>
	<dependencies>
	<!-- https://mvnrepository.com/artifact/org.springframework/spring-beans -->
	<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-beans</artifactId>
	<version>5.0.2.RELEASE</version>
	</dependency>
	<!-- https://mvnrepository.com/artifact/org.springframework/spring-core -->
	<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-core</artifactId>
	<version>5.0.2.RELEASE</version>
	</dependency>
	<!-- https://mvnrepository.com/artifact/org.springframework/spring-context -->
	<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-context</artifactId>
	<version>5.0.2.RELEASE</version>
	</dependency>
	<!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->
	<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-webmvc</artifactId>
	<version>5.0.2.RELEASE</version>
	</dependency>
	<!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
	<dependency>
	<groupId>javax.servlet</groupId>
	<artifactId>javax.servlet-api</artifactId>
	<version>3.1.0</version>
	<scope>provided</scope>
	</dependency>
	<!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
	<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-jdbc</artifactId>
	<version>5.0.2.RELEASE</version>
	</dependency>
	<!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
	<dependency>
	<groupId>mysql</groupId>
	<artifactId>mysql-connector-java</artifactId>
	<version>6.0.6</version>
	</dependency>
	<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-databind</artifactId>
	<version>2.9.1</version>
	</dependency>
	<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-core</artifactId>
	<version>2.9.1</version>
	</dependency>
	<dependency>
	<groupId>com.fasterxml.jackson.core</groupId>
	<artifactId>jackson-annotations</artifactId>
	<version>2.9.1</version>
	</dependency>
	<dependency>
	<groupId>javax.servlet</groupId>
	<artifactId>jstl</artifactId>
	<version>1.2</version>
	</dependency>
	</dependencies>
	</project>

view raw pom.xml hosted with ❤ by GitHub

EmployeeController.java

	package com.gurugubelli.controller;
	import java.util.List;
	import org.springframework.beans.factory.annotation.Autowired;
	import org.springframework.stereotype.Controller;
	import org.springframework.web.bind.annotation.RequestMapping;
	import org.springframework.web.bind.annotation.RequestMethod;
	import org.springframework.web.bind.annotation.ResponseBody;
	import org.springframework.web.servlet.ModelAndView;
	import com.gurugubelli.bean.Employee;
	import com.gurugubelli.service.EmployeeService;
	@Controller
	public class EmployeeController {
	@Autowired
	public EmployeeService employeeService;
	@RequestMapping(value = "/home", method = RequestMethod.GET)
	public ModelAndView test() {
	return new ModelAndView("home");
	}
	@RequestMapping(value = "/employeeList", method = RequestMethod.GET)
	public ModelAndView listOfEmployee() {
	List<Employee> employeeList = employeeService.getListOfEmployee();
	System.out.println(employeeList.toString());
	System.out.println(employeeList.size());
	ModelAndView view = new ModelAndView("listOfEmployee");
	view.addObject("empList", employeeList);
	return view;
	}
	@RequestMapping(value = "/addEmployee", method = RequestMethod.GET)
	public ModelAndView addEmployeePage() {
	System.out.println("addEmployee page loaded...");
	ModelAndView view = new ModelAndView("addEmployee");
	return view;
	}
	@RequestMapping(value = "/addEmployee", method = RequestMethod.POST)
	public ModelAndView addEmployee(Employee employee) {
	boolean flag = employeeService.addEmployee(employee);
	System.out.println("Flag: "+flag);
	ModelAndView view = new ModelAndView("addEmployee");
	if(flag) {
	view.addObject("msg", "Employee " +employee.getFirstName()+ ", " +employee.getLastName()+ " added successfully...");
	} else {
	view.addObject("msg", "Error occured while registering employee, please try again...");
	}
	return view;
	}
	@RequestMapping(value = "/updateEmployee", method = RequestMethod.GET)
	public ModelAndView updateEmployeePage() {
	System.out.println("updateEmployee page loaded...");
	ModelAndView view = new ModelAndView("updateEmployee");
	view.addObject("empList", employeeService.getListOfEmployee());
	return view;
	}
	@ResponseBody
	@RequestMapping(value = "/updateEmployee", method = RequestMethod.POST)
	public String updateEmployee(Employee employee) {
	System.out.println(employee.getFirstName());
	String msg = "Error occured while updating employee: " + employee.getFirstName() + ", " + employee.getLastName() + ", please try again";
	try {
	if(employee != null) {
	boolean flag = employeeService.updateEmployee(employee);
	if(flag) {
	msg = "Employee ID: "+ employee.getEmpNo() + " details updated successfully...";
	}
	}
	} catch (Exception e) {
	e.printStackTrace();
	}
	return msg;
	}
	@RequestMapping(value = "/deleteEmployee", method = RequestMethod.GET)
	public ModelAndView deleteEmployeePage() {
	System.out.println("deleteEmployee page loaded...");
	ModelAndView view = new ModelAndView("deleteEmployee");
	view.addObject("empList", employeeService.getListOfEmployee());
	return view;
	}
	@ResponseBody
	@RequestMapping(value = "/deleteEmployee", method = RequestMethod.POST)
	public String deleteEmployee(String empNo) {
	System.out.println("inside delete");
	String msg = "Error occured while deleting employee: " + empNo;
	try {
	if(empNo != null) {
	boolean flag = employeeService.deleteEmployee(empNo);
	if(flag) {
	msg = "Employee ID: "+ empNo + " deleted successfully...";
	}
	}
	} catch (Exception e) {
	e.printStackTrace();
	}
	return msg;
	}
	}

view raw EmployeeController.java hosted with ❤ by GitHub

EmployeeService.java

	package com.gurugubelli.service;
	import java.util.List;
	import com.gurugubelli.bean.Employee;
	public interface EmployeeService {
	public List<Employee> getListOfEmployee();
	public boolean addEmployee(Employee employee);
	public boolean updateEmployee(Employee employee);
	public boolean deleteEmployee(String empNo);
	}

view raw EmployeeService.java hosted with ❤ by GitHub

EmployeeServiceImpl.java

	package com.gurugubelli.service;
	import java.util.List;
	import org.springframework.beans.factory.annotation.Autowired;
	import org.springframework.stereotype.Service;
	import com.gurugubelli.bean.Employee;
	import com.gurugubelli.dao.EmployeeDao;
	@Service
	public class EmployeeServiceImpl implements EmployeeService {
	@Autowired
	public EmployeeDao employeeDao;
	public List<Employee> getListOfEmployee() {
	return employeeDao.getListOfEmployee();
	}
	public boolean addEmployee(Employee employee) {
	return employeeDao.addEmployee(employee);
	}
	public boolean updateEmployee(Employee employee) {
	return employeeDao.updateEmployee(employee);
	}
	public boolean deleteEmployee(String empNo) {
	return employeeDao.deleteEmployee(empNo);
	}
	}

view raw EmployeeServiceImpl.java hosted with ❤ by GitHub

EmployeeDao.java

	package com.gurugubelli.dao;
	import java.util.List;
	import com.gurugubelli.bean.Employee;
	public interface EmployeeDao {
	public List<Employee> getListOfEmployee();
	public boolean addEmployee(Employee employee);
	public boolean updateEmployee(Employee employee);
	public boolean deleteEmployee(String empNo);
	}

view raw EmployeeDao.java hosted with ❤ by GitHub

EmployeeDaoImpl.java

	package com.gurugubelli.dao;
	import java.sql.Connection;
	import java.sql.PreparedStatement;
	import java.sql.ResultSet;
	import java.sql.SQLException;
	import java.util.ArrayList;
	import java.util.List;
	import javax.sql.DataSource;
	import org.springframework.beans.factory.annotation.Autowired;
	import org.springframework.stereotype.Repository;
	import com.gurugubelli.bean.Employee;
	import com.gurugubelli.util.GurugubelliUtil;
	@Repository
	public class EmployeeDaoImpl implements EmployeeDao {
	@Autowired
	public DataSource dataSource;
	public List<Employee> getListOfEmployee() {
	List<Employee> employeesList = new ArrayList<Employee>();
	try {
	Connection connection = dataSource.getConnection();
	PreparedStatement preparedStatement = connection.prepareStatement(GurugubelliUtil.SELECT_EMP_QUERY);
	ResultSet resultSet = preparedStatement.executeQuery();
	while(resultSet.next()) {
	Employee emp = new Employee();
	emp.setEmpNo(GurugubelliUtil.EMP_ID_PATTERN + resultSet.getString("EMP_NO"));
	emp.setFirstName(resultSet.getString("FIRST_NAME"));
	emp.setLastName(resultSet.getString("LAST_NAME"));
	emp.setDeptName(resultSet.getString("DEPT_NAME"));
	employeesList.add(emp);
	}
	} catch (SQLException e) {
	e.printStackTrace();
	}
	return employeesList;
	}
	public boolean addEmployee(Employee employee) {
	if(employee != null) {
	try {
	Connection connection = dataSource.getConnection();
	PreparedStatement preparedStatement = connection.prepareStatement(GurugubelliUtil.INSERT_EMP_QUERY);
	preparedStatement.setString(1, employee.getFirstName());
	preparedStatement.setString(2, employee.getLastName());
	preparedStatement.setString(3, employee.getDeptName());
	preparedStatement.executeUpdate();
	preparedStatement.close();
	return true;
	} catch (SQLException e) {
	e.printStackTrace();
	return false;
	}
	}
	return false;
	}
	public boolean updateEmployee(Employee employee) {
	if(employee != null) {
	try {
	System.out.println(employee.toString());
	Connection connection = dataSource.getConnection();
	PreparedStatement preparedStatement = connection.prepareStatement(GurugubelliUtil.UPDATE_EMP_QUERY);
	preparedStatement.setString(1, employee.getFirstName());
	preparedStatement.setString(2, employee.getLastName());
	preparedStatement.setString(3, employee.getDeptName());
	preparedStatement.setInt(4, GurugubelliUtil.getEmpId(employee.getEmpNo()));
	preparedStatement.executeUpdate();
	preparedStatement.close();
	return true;
	} catch (Exception e) {
	e.printStackTrace();
	return false;
	}
	}
	return false;
	}
	public boolean deleteEmployee(String empNo) {
	if(empNo != null) {
	try {
	Connection connection = dataSource.getConnection();
	PreparedStatement preparedStatement = connection.prepareStatement(GurugubelliUtil.DELETE_EMP_QUERY);
	preparedStatement.setInt(1, GurugubelliUtil.getEmpId(empNo));
	preparedStatement.executeUpdate();
	preparedStatement.close();
	return true;
	} catch (Exception e) {
	e.printStackTrace();
	}
	}
	return false;
	}
	}

view raw EmployeeDaoImpl.java hosted with ❤ by GitHub

GurugubelliUtil.java

	package com.gurugubelli.util;
	public class GurugubelliUtil {
	public static final String EMP_ID_PATTERN = "EMP000";
	public static final String SELECT_EMP_QUERY = "select * from EMPLOYEE;";
	public static final String INSERT_EMP_QUERY = "insert into EMPLOYEE(EMP_NO, FIRST_NAME, LAST_NAME, DEPT_NAME) select max(EMP_NO)+1, ?, ?, ? from employee;";
	public static final String UPDATE_EMP_QUERY = "update EMPLOYEE set FIRST_NAME = ?, LAST_NAME = ?, DEPT_NAME = ? where EMP_NO = ?";
	public static final String DELETE_EMP_QUERY = "delete from EMPLOYEE WHERE EMP_NO = ?";
	public static final String SELECT_EMP_MAX_EMP_NO = "SELECT MAX(EMP_NO) FROM EMPLOYEE;";
	public static int getEmpId(String empId) {
	if(empId != null) {
	String temp = empId.substring(5);
	return new Integer(temp);
	}
	return 0;
	}
	}

view raw GurugubelliUtil.java hosted with ❤ by GitHub

Employee.java

	package com.gurugubelli.bean;
	import java.io.Serializable;
	public class Employee implements Serializable {
	/**
	*
	*/
	private static final long serialVersionUID = 1L;
	private String empNo;
	private String firstName;
	private String lastName;
	private String deptName;
	/**
	* @return the empNo
	*/
	public String getEmpNo() {
	return empNo;
	}
	/**
	* @param empNo
	* the empNo to set
	*/
	public void setEmpNo(String empNo) {
	this.empNo = empNo;
	}
	/**
	* @return the firstName
	*/
	public String getFirstName() {
	return firstName;
	}
	/**
	* @param firstName
	* the firstName to set
	*/
	public void setFirstName(String firstName) {
	this.firstName = firstName;
	}
	/**
	* @return the lastName
	*/
	public String getLastName() {
	return lastName;
	}
	/**
	* @param lastName
	* the lastName to set
	*/
	public void setLastName(String lastName) {
	this.lastName = lastName;
	}
	/**
	* @return the deptName
	*/
	public String getDeptName() {
	return deptName;
	}
	/**
	* @param deptName
	* the deptName to set
	*/
	public void setDeptName(String deptName) {
	this.deptName = deptName;
	}
	/* (non-Javadoc)
	* @see java.lang.Object#toString()
	*/
	@Override
	public String toString() {
	return "Employee [empNo=" + empNo + ", firstName=" + firstName + ", lastName=" + lastName + ", deptName="
	+ deptName + "]";
	}
	}

view raw Employee.java hosted with ❤ by GitHub

home.jsp

	<!DOCTYPE html>
	<html>
	<head>
	<title>Home</title>
	</head>
	<body>
	<%@include file="menu.html" %>
	<br>
	<br>
	<br>
	<br>
	<h1 align="center">Welcome to Employee Management System</h1>
	</body>
	</html>

view raw home.jsp hosted with ❤ by GitHub

menu.jsp

	<!DOCTYPE html>
	<html>
	<head>
	<title>Home</title>
	</head>
	<body>
	<%@include file="menu.html" %>
	<br>
	<br>
	<br>
	<br>
	<h1 align="center">Welcome to Employee Management System</h1>
	</body>
	</html>

view raw home.jsp hosted with ❤ by GitHub

addEmployee.jsp

	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
	<%@ 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>Add Employee</title>
	</head>
	<body>
	<%@include file="menu.html"%>
	<h2 align="center" style="color: green;" class="alert alert-info">Register Employee</h2>
	<h3 align="center" style="color: green;" id="msgDiv">${msg}</h3>
	<br>
	<form action="./addEmployee" method="POST">
	<table align="center" style="width: 35%;" class="table table-hover table-bordered">
	<tr><td>First Name:</td><td><input type="text" id="firstName" name="firstName" required/></td></tr>
	<tr><td>Last Name:</td><td><input type="text" id="lastName" name="lastName" required/></td></tr>
	<tr><td>Dept Name:</td><td><input type="text" id="deptName" name="deptName" required/></td></tr>
	<tr><td colspan="2"><center><input type="submit" class="btn btn-primary" value="Register Employee" align="middle"/></center></td></tr>
	</table>
	</form>
	</body>
	<script type="text/javascript">
	$(document).ready(function(){
	$("#firstName, #lastName, #deptName").click(function() {
	$("#msgDiv").hide();
	});
	});
	</script>
	</html>

view raw addEmployee.jsp hosted with ❤ by GitHub

listOfEmployee.jsp

	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Employee List</title>
	</head>
	<body>
	<%@include file="menu.html"%>
	<h2 align="center" style="color: green;" class="alert alert-info">Employee List</h2>
	<br>
	<c:if test="${empList != null}">
	<table align="center" class="table table-hover table-bordered" style="width: 70%;">
	<tr style="background-color: silver;">
	<th>SNo</th>
	<th>Emp ID</th>
	<th>First Name</th>
	<th>Last Name</th>
	<th>Dept</th>
	</tr>
	<c:forEach items="${empList}" var="emp" varStatus="counter">
	<tr>
	<td align="center"><c:out value="${counter.count}"></c:out></td>
	<td><c:out value="${emp.empNo}"></c:out></td>
	<td><c:out value="${emp.firstName}"></c:out></td>
	<td><c:out value="${emp.lastName}"></c:out></td>
	<td><c:out value="${emp.deptName}"></c:out></td>
	</tr>
	</c:forEach>
	</table>
	</c:if>
	</body>
	</html>

view raw listOfEmployee.jsp hosted with ❤ by GitHub

updateEmployee.jsp

	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
	<%@ 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>Add Employee</title>
	</head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Update Employee</title>
	</head>
	<body>
	<%@include file="menu.html"%>
	<h2 align="center" style="color: green;" class="alert alert-info">Update Employee</h2>
	<br>
	<h3><div id="msgDiv" style="display: none; color: green;" align="center"></div></h3>
	<br>
	<c:choose>
	<c:when test="${empList != null}">
	<table border="1" align="center" class="table table-hover" style="width: 28%;">
	<tr>
	<td>Select Employee ID:<span style="color: red;"> *</span></td>
	<td>
	<select id="SelectedEmpId">
	<option value="NONE">--Select Emp No--</option>
	<c:forEach items="${empList}" var="emp">
	<option value="${emp.firstName}&${emp.lastName}&${emp.deptName}" id="${emp.empNo}">${emp.empNo}</option>
	</c:forEach>
	</select>
	</td>
	</tr>
	<tr id="EmpFirstNameTr" style="display: none;">
	<td>First Name:</td>
	<td><input type="text" name="updFirstName" id="EmpUptFirstName"></td>
	</tr>
	<tr id="EmpLastNameTr" style="display: none;">
	<td>Last Name:</td>
	<td><input type="text" name="updLastName" id="EmpUptLastName"></td>
	</tr>
	<tr id="EmpDeptNameTr" style="display: none;">
	<td>Dept Name:</td>
	<td><input type="text" name="updDeptName" id="EmpUptDeptName"></td>
	</tr>
	<tr id="EmpBtn" style="display: none;">
	<td align="center"><input type="button" id="CancelBtn" value="Cancel" class="btn btn-primary"/></td>
	<td align="center"><input type="button" id="UpdateBtn" value="Update Employee" class="btn btn-primary"/></td>
	</tr>
	</table>
	</c:when>
	</c:choose>
	</body>
	<script type="text/javascript">
	$(document).ready(function(){
	$("#SelectedEmpId").change(function(){
	$("#msgDiv").hide();
	var empId = $("#SelectedEmpId :selected").text();
	var empTemp = $("#SelectedEmpId :selected").val();
	var id = $("#SelectedEmpId :selected").val();
	empTemp=empTemp.split("&");
	if(empTemp != "NONE") {
	var firstName=empTemp[0];
	var lastName=empTemp[1];
	var deptName=empTemp[2];
	$("#EmpUptFirstName").val(firstName);
	$("#EmpUptLastName").val(lastName);
	$("#EmpUptDeptName").val(deptName);
	$("#EmpFirstNameTr").show();
	$("#EmpLastNameTr").show();
	$("#EmpDeptNameTr").show();
	$("#EmpBtn").show();
	$("#SelectedEmpId").prop('disabled', false);
	} else {
	clearEmployeeData();
	}
	});
	$("#CancelBtn").click(function(){
	clearEmployeeData();
	});
	function clearEmployeeData() {
	$("#EmpFirstNameTr").hide();
	$("#EmpLastNameTr").hide();
	$("#EmpDeptNameTr").hide();
	$("#EmpBtn").hide();
	$("#SelectedEmpId").prop('selectedIndex',0);
	}
	$("#UpdateBtn").click(function(){
	var empNo = $("#SelectedEmpId :selected").text();
	var firstName=$("#EmpUptFirstName").val();
	var lastName=$("#EmpUptLastName").val();
	var deptName=$("#EmpUptDeptName").val();
	$.ajax({
	url: "./updateEmployee",
	data: {empNo:empNo, firstName:firstName, lastName:lastName, deptName: deptName},
	type: "POST",
	success: function(data) {
	$("#msgDiv").text(data);
	$("#msgDiv").show();
	clearEmployeeData();
	}
	});
	});
	});
	</script>
	</html>

view raw updateEmployee.jsp hosted with ❤ by GitHub

deleteEmployee.jsp

	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
	<%@ 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>Add Employee</title>
	</head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Update Employee</title>
	</head>
	<body>
	<%@include file="menu.html"%>
	<h2 align="center" style="color: green;" class="alert alert-info">Delete Employee</h2>
	<h3><div id="msgDiv" style="display: none; color: green;" align="center"></div></h3>
	<br>
	<c:choose>
	<c:when test="${empList != null}">
	<table border="1" align="center" class="table table-hover" style="width: 35%;">
	<tr>
	<td>Select Employee ID:<span style="color: red;"> *</span></td>
	<td>
	<select id="SelectedEmpId">
	<option value="NONE">--Select Emp No--</option>
	<c:forEach items="${empList}" var="emp">
	<option value="${emp.firstName}&${emp.lastName}&${emp.deptName}" id="${emp.empNo}">${emp.empNo}</option>
	</c:forEach>
	</select>
	</td>
	</tr>
	<tr id="EmpFirstNameTr" style="display: none;">
	<td>First Name:</td>
	<td><input type="text" name="updFirstName" id="EmpUptFirstName" disabled="disabled"></td>
	</tr>
	<tr id="EmpLastNameTr" style="display: none;">
	<td>Last Name:</td>
	<td><input type="text" name="updLastName" id="EmpUptLastName" disabled="disabled"></td>
	</tr>
	<tr id="EmpDeptNameTr" style="display: none;">
	<td>Dept Name:</td>
	<td><input type="text" name="updDeptName" id="EmpUptDeptName" disabled="disabled"></td>
	</tr>
	<tr id="EmpBtn" style="display: none;">
	<td align="center"><input type="button" id="CancelBtn" value="Cancel" class="btn btn-primary"/></td>
	<td align="center"><input type="button" id="DeleteBtn" value="Delete Employee" class="btn btn-primary"/></td>
	</tr>
	</table>
	</c:when>
	</c:choose>
	</body>
	<script type="text/javascript">
	$(document).ready(function(){
	$("#SelectedEmpId").change(function(){
	$("#msgDiv").hide();
	var empId = $("#SelectedEmpId :selected").text();
	var empTemp = $("#SelectedEmpId :selected").val();
	var id = $("#SelectedEmpId :selected").val();
	empTemp=empTemp.split("&");
	if(empTemp != "NONE") {
	var firstName=empTemp[0];
	var lastName=empTemp[1];
	var deptName=empTemp[2];
	$("#EmpUptFirstName").val(firstName);
	$("#EmpUptLastName").val(lastName);
	$("#EmpUptDeptName").val(deptName);
	$("#EmpFirstNameTr").show();
	$("#EmpLastNameTr").show();
	$("#EmpDeptNameTr").show();
	$("#EmpBtn").show();
	$("#SelectedEmpId").prop('disabled', false);
	} else {
	clearEmployeeData();
	}
	});
	$("#CancelBtn").click(function(){
	clearEmployeeData();
	});
	function clearEmployeeData() {
	$("#EmpFirstNameTr").hide();
	$("#EmpLastNameTr").hide();
	$("#EmpDeptNameTr").hide();
	$("#EmpBtn").hide();
	$("#SelectedEmpId").prop('selectedIndex',0);
	}
	$("#DeleteBtn").click(function(){
	var empNo = $("#SelectedEmpId :selected").text();
	$.ajax({
	url: "./deleteEmployee",
	data: {empNo:empNo},
	type: "POST",
	success: function(data) {
	$("#msgDiv").text(data);
	$("#msgDiv").show();
	clearEmployeeData();
	$("#SelectedEmpId option:contains("+empNo+")").remove();
	}
	});
	});
	});
	</script>
	</html>

view raw deleteEmployee.jsp hosted with ❤ by GitHub