Delete from controller using JQUERY AJAX (Spring MVC)

Question

someone could help me with this problem? I need to implement ajax , sweetalert.js using this repository: http://t4t5.github.io/sweetalert/

everything is going well so far to use onclick = "" and call my Function. If someone could tell me how I should use this function to make the elimination of an employee , I'd appreciate strongly.

This is my controller method ::

    @RequestMapping(value = "/eliminarEmpleado", method = RequestMethod.GET)
public ModelAndView eliminarEmpleado(HttpServletRequest request) {
    int empId = Integer.parseInt(request.getParameter("id"));
    empleadoService.eliminarEmpleado(empId);
    return new ModelAndView("redirect:/");
}

This is my jsp where the list of employees and the delete button is (I need to replace the href that I put to the test , which certainly works well but does not use the way I need bone : jquery .):::

<table id="central"  class="table table-condensed" align="center">

    <thead >
        <tr>
            <th >ID</th>
            <th>NOMBRE</th>
            <th >AP. PATERNO</th>
            <th>AP. MATERNO</th>
            <th>EMAIL</th>
            <th>TELÉFONO</th>
            <th>FECHA DE NACIMIENTO</th>
            <th>SALARIO</th>
            <th>REGIÓN</th>
            <th>PAÍS</th>
            <th>CALLE</th>
            <th>CÓDIGO POSTAL</th>
            <th>CIUDAD</th>
            <th>PROVINCIA</th>
            <th>DEPARTAMENTO</th>
            <th>ACCIONES</th>
        </tr>
    </thead>
    <tbody>


        <c:forEach items="${lista}" var="r">
            <tr>
                <td id="idEmpleado"  align="center">${r.idEmpleado}</td>
                <td align="center">${r.nombre}</td>
                <td align="center">${r.apPaterno}</td>
                <td align="center">${r.apMaterno}</td>
                <td align="center">${r.email}</td>
                <td align="center">${r.telefono}</td>
                <td align="center">${r.fechaNac}</td>
                <td align="center">${r.salario}</td>
                <td align="center">${r.nombreRegion}</td>
                <td align="center">${r.nombrePais}</td>
                <td align="center">${r.nombreCalle}</td>
                <td align="center">${r.codigoPostal}</td>
                <td align="center">${r.ciudad}</td>
                <td align="center">${r.provincia}</td>
                <td align="center">${r.nombreDepartamento}</td>

                <td><a data-original-title="Ver" href="editContact.htm?id=${empleado.id}" data-toggle="tooltip" data-placement="top" title=""><span class="glyphicon glyphicon-eye-open"></span></a>  <a data-original-title="Eliminar"   href="eliminarEmpleado.htm?id=${r.idEmpleado}" data-toggle="tooltip" data-placement="top" title=""><span class="glyphicon glyphicon-trash"></span></a> </td>
                </tr>
        </c:forEach>

    </tbody>
</table>

And this is my jquery code , they could help me with this ? I need to know exactly how I use it , I carry on trying hours and I have not the result I hope :(

<script>


    function deleteEmploy(idEmpleado) {

        swal({   
            title: "Are you sure?",   
            text: "You will not be able to recover this imaginary file!",   
            type: "warning",   
            showCancelButton: true,   
            confirmButtonColor: "#DD6B55",   
            confirmButtonText: "Yes, delete it!",   
            cancelButtonText: "No, cancel plx!",   
            closeOnConfirm: false,   
            closeOnCancel: false
            }, 
            function(isConfirm){   
                if (isConfirm) { 

                    swal("Deleted!", "Your imaginary file has been deleted.", "success");   
                    } else {     swal("Cancelled", "Your imaginary file is safe :)", "error");   
        } });
    event.preventDefault


}
    </script>

Answer 1

You're missing the ajax function call which will call the eliminarEmpleado controller method on the server side. You also haven't called deleteEmploy() anywhere in your code.

Try this:

HTML: Add an id to the anchor tag which when clicked should call deleteEmploy()

<td><a data-original-title="Eliminar" data-toggle="tooltip" data-placement="top" title="" id="deleteEmp" ><span class="glyphicon glyphicon-trash"></span></a> </td>

Javascript: Register deleteEmploy() as the onclick event handler for the <a id="deleteEmp"> link and call ajax() .

<script>

    $("#deleteEmp").on("click", deleteEmploy); //when #deleteEmp link is clicked, deleteEmploy() will be called

    function deleteEmploy() {

        swal({   
            title: "Are you sure?",   
            text: "You will not be able to recover this emplyoyee!",   
            type: "warning",   
            showCancelButton: true,   
            confirmButtonColor: "#DD6B55",   
            confirmButtonText: "Yes, delete it!",   
            cancelButtonText: "No, cancel plx!",   
            closeOnConfirm: false,   
            closeOnCancel: false
            }, 
            function(isConfirm){   
                if (isConfirm) { 
                    var data = {};
                    data["idEmpleado"] = $("#idEmpleado").html();
                    $.ajax({
                        type: "GET",
                        contentType: "application/json",
                        url: "${home}/eliminarEmpleado",
                        data: JSON.stringify(data),
                        dataType: "json",
                        success: function(){ 
                            swal("Deleted!", "The employee has been deleted.", "success");   
                        },
                        error: function(){
                            swal("Error", "Could not be deleted! :)", "error");   
                        }

                    });  



              } else {     swal("Cancelled", "Employee is safe :)", "error");   
        } });
    event.preventDefault


}
</script>