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>

Chintan · Accepted Answer · 2016-05-14 06:05:18Z

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>

edited May 14, 2016 at 6:05

answered May 14, 2016 at 3:37

Chintan

7739 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Juan Carlos Hilario Ramírez Over a year ago

thank you my friend , I'll try. I will tell you as I was .

Juan Carlos Hilario Ramírez Over a year ago

Everything is going great friend thank you very much , but now it turns out that I can not call my function , you know how this could replace ::: href = " eliminarEmpleado.htm id = $ { r.idEmpleado } ? " Created by the new function " deleteEmploy ( ) "as I send the parameter that is sent ?

Chintan Over a year ago

You haven't called deleteEmploy() in your code. You can register deleteEmploy as the onclick event handler for the a tag - so that when the link is clicked, deleteEmploy() is called and ajax is fired.

Juan Carlos Hilario Ramírez Over a year ago

Oh , Thank friend for giving you the answer I value time a lot, have gmail to contact you? I see you are very good at this I wanted to get on that track.

Juan Carlos Hilario Ramírez Over a year ago

Friend just try to put it in that but I get this error function :: "GET http : // localhost: 8080 / app / eliminarEmpleado {% 22idEmpleado?{% 22 : % 22 % 22 } 500 ( Internal Server Error ) " when I try to eliminate sending a ::: href = "? editContact.htm id = $ { empleado.id } " performs successfully removing this route throwing myself "http : // localhost: 8080 / app / eliminarEmpleado?id=14" What do you think is the problem?

|

Collectives™ on Stack Overflow

Delete from controller using JQUERY AJAX (Spring MVC)

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related