JS Delete fuction implemented

Author: gerardpuigl

src/main/java/com/itacademy/CrudEmpleats/controller/ControllerEmployees.java

@@ -1,9 +1,7 @@
 package com.itacademy.CrudEmpleats.controller;
 
-import java.io.IOException;
 import java.util.List;
 
-import javax.servlet.http.HttpServletResponse;
 
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.HttpStatus;

src/main/resources/static/index.js

@@ -5,35 +5,59 @@ $(document).ready(function() {
 		$.ajax({
 			url: '/EmployeeList',
 			type: 'POST',
+			contentType: 'application/Json',
 			data: JSON.stringify({
 				"name": $('#name').val(),
 				"job": $('#job').val()
 			}),
-			processData: false,
-			contentType: "application/json"
-		})
-		updateTable()
+			success: function(data, textStatus, jQxhr) {
+				updateTable();
+				$('#newEmployee').trigger('reset');
+			},
+			error: function(xhr, textStatus, errorThrown) {
+				console.log(textStatus);
+			}
+		});
+
 	});
 
 	$(function() {
 		updateTable();
 	});
+});
+
+function updateTable() {
+	$.get("/EmployeeList", function(data) {
+		$('#employeeTable > tbody').empty();
+		var table_data;
+		$.each(data, function(i, employee) {
+			table_data += "<tr>" +
+				"<td ><form>" + employee.id + "</td>" +
+				"<td >" + employee.name + "</td>" +
+				"<td>" + employee.job + "</td>" +
+				"<td>" + employee.salary + "</td>" +
+				"<td>" +
+				"<button type=submit>Modificar</button>" +
+				"<button type=submit onclick='deleteEmploye(" + employee.id + ")'>Eliminar</button>" +
+				"<form></td>"
+		});
+		$('#employeeTable > tbody').append(table_data);
+	});
+};
 
-	function updateTable() {
-		$.get("/EmployeeList", function(data) {
-			$('#employeeTable > tbody').empty()
-			$.each(data, function(i, employee) {
-				var tblRow = "<tr>" +
-					"<td>" + employee.id + "</td>" +
-					"<td>" + employee.name + "</td>" +
-					"<td>" + employee.job + "</td>" +
-					"<td>" + employee.salary + "</td>" +
-					"<td>" +
-					"<button type=submit>Modificar</button>" +
-					"<button type=submit>Eliminar</button>" +
-					"</td>"
-				$(tblRow).appendTo("#employeeTable tbody");
-			});
+function deleteEmploye(id) {
+	if (confirm("Desitja eliminar a l'Empleat?")) {
+		$.ajax({
+			type: "DELETE",
+			url: "/EmployeeList/" + id,
+			success: function(data, textStatus, jQxhr) {
+				updateTable();
+			},
+			error: function(xhr, textStatus, errorThrown) {
+				console.log(textStatus);
+			}
 		});
+
 	};
-});
+
+};

src/main/resources/templates/index.html

@@ -27,6 +27,15 @@ <H4>Empleats</H4><button type="submit">Nou Empleat</button>
 				</tr>
 			</thead>
 			<tbody>
+				<form> <tr>
+				<td id=employeeId>IdExempleAtHtml</td>
+				<td id=employeeName>NameExempleAtHtml </td>
+				<td> JobExempleAtHtml</td>
+				<td> SalaryExempleAtHtml </td>
+				<td>
+				<button type=submit>Modificar</button>
+				<button type=submit id=deleteEmployee>Eliminar</button>
+				</form></td>
 			</tbody>
 		</table>
 	</div>