CODEWITHSUNDEEP
javascriptjqueryajax
Gaurav
Gaurav

Reputation: 61

My Ajax function is not working when i click on delete link, however works for edit link

Below is my home.jsp page

<%@ 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>welcome</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body onload="load();">
<input type="hidden" id="empId">
Name: <input type="text" id="emp_name" required="required" name="empName"><br>
Address: <input type="text" id="emp_address" required="required" name="empAddress"><br>
Salary: <input type="text" id="emp_salary" required="required" name="empSalary"><br>
<button onclick="submit();">submit</button>
<table id="table" border="1">
    <tr>
        <th>Name</th>
        <th>Address</th>
        <th>Salary</th>
        <th>edit</th>
        <th>delete</th>
    </tr>
</table>
</body>
<script type="text/javascript">
    data = "";
    load = function () {
        $.ajax({
            url: 'getlist',
            type: 'get',
            success: function (response) {
                data = response.data;
                $('.tr').remove();
                for (i = 0; i < response.data.length; i++) {
                    $("#table").append("<tr class = 'tr'> <td>" + response.data[i].empName + "</td>	<td>" + response.data[i].empAddress + "</td> <td>" + response.data[i].empSalary + "</td> <td><a href ='#' onclick = 'edit(" + i + ");'> edit </a> </td>  <td> <a href ='#' onlclick = 'deleteEmp(" + response.data[i].empId + ");'> delete </a></td></tr>")
                }
            }
        });
    }
    edit = function (index) {

        //when we click on edit, those value should be available in our table fields.
        $("#empId").val(data[index].empId);
        $("#emp_name").val(data[index].empName);
        $("#emp_address").val(data[index].empAddress);
        $("#emp_salary").val(data[index].empSalary);
    }
    submit = function () {
        $.ajax({
            url: "saveOrUpdate",
            method: "post",
            data: {
                empId: $("#empId").val(),
                empName: $("#emp_name").val(),
                empAddress: $("#emp_address").val(),
                empSalary: $("#emp_salary").val()
            },
            success: function (response) {
                alert(response.message);
                load();
            }
        });
    }
    deleteEmp = function (Id) {
        $.ajax({
            url: 'delete',
            method: 'put',
            data: {empId: Id},
            success: function (response) {
                alert(response.message);
                load();
            }
        });
    }
</script>
</html>

Idea is when I click on delete link, it should call delete function, which then can interact with Spring controller class, however it is not working expected. I have also given edit link(which is exactly similar to delete) that is working as expected. So i am really confused and not able to debug the issue.

Need help as i am very new to all this and learning by myself.

Upvotes: 1

Views: 80

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

You have a typo in the delete link's event name: onlclick.

However, isn't not a good practice to use inline event binding. Try this:

var html = "";
for (i = 0; i < response.data.length; i++) {
    html+= "<tr class = 'tr'> <td>" + response.data[i].empName + "</td> <td>" + response.data[i].empAddress + "</td> <td>" + response.data[i].empSalary + "</td> <td><a href ='#' class='edit-button'> edit </a> </td>  <td> <a href ='#' class='delete-button' data-empid='" + response.data[i].empId + "'> delete </a></td></tr>";
}
$("#table").append(html);

And in the global scope:

$(document).ready(function() {
    $("#table")
        .on("click", ".delete-button", function() {
            var empIp = $(this).data("empid");
            deleteEmp(empId);
        })
        .on("click", ".edit-button", function() {
            var index = $(this).closest("tr").index();
            edit(index);
        });
});

The first snippet will create your elements using only one append() call, and with no inline event binding.

The last snippet binds the click events to your table, so doesn't metters if the rows are created dynamicaly, the events are not created every time. The delete event uses a data-attribute to get empId and the edit event finds the rows index by the tr index.

Upvotes: 1

Related Questions