1

estoy haciendo un CRUD con Laravel, AJAX y MySQL. El problema es que, a la hora de eliminar los registros, me pasa algo que no consigo entender. Cuando refresco la pagina, elimino un registro y todo va perfecto, sin embargo, al borrar el segundo, me vuelve a intentar borrar el primero (lo cual obviamente da un error 500) y el segundo lo hace bien, y asi sucesivamente con el tercer registro, cuarto, etc... Me intenta borrar todos los anteriores antes de ese.

Esta es la ventana modal del botón que llama a la función que elimina los registros:

<div id="delete-user" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title">Eliminar Usuario</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
        <form>
        @csrf
      <p id="delete-user-txt"></p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      <button type="submit" id="remove_btn" class="btn btn-danger">Delete</button>
    </div>
</form>
  </div>
</div>

Petición AJAX que muestra la ventana modal y elimina los registros:

    function show_delete_form(id) {
        
        $.get('/admin/show-delete-form/' + id, function (user) {
        $("#delete-user-txt").html('¿Desea eliminar el usuario ' + user + '?');
        $('#delete-user').modal('toggle');
        })
        const token = $("input[name=_token]").val();
        $('#remove_btn').click(function(e){
            e.preventDefault();
            let id_empty= id;
            console.log(id_empty);
            console.log('/admin/show-delete-form/' + id);
            $.ajax({
                url: "/admin/delete-register",
                method: "POST",
                data: {
                    id: id,
                    _token: token
                },
                success: function (res) {
                    if (res == true) {
                        console.log(res);
                        id_empty= "";
                        $('#delete-user').modal('hide');
                        toastr.info('El registro fue eliminado correctamente',
                            'Eliminar Registro', {
                                timeout: 3000
                            });

                            $('#users_table').DataTable().ajax.reload();
                            


                    }  
                    if (res == "same_admin") {
                        toastr.warning('No puedes eliminarte a ti mismo', 'Eliminar Registro', {
                            timeout: 3000
                        });
                    }
                    if (res == false) {
                        toastr.warning('Ha ocurrido un error', 'Eliminar Registro', {
                            timeout: 3000
                        });
                    }
                }
            })
})
    }

La ruta control_panel que muestra la datatable:

   function control_panel(Request $request)
{
    if ($request->ajax()) {
        # code...

        $users = DB::table('users')->get('*');

        return DataTables::of($users)
            ->addColumn('edit', function ($edit) {
                $edit = '<td class="text-center"><a onclick="edit_user(' . $edit->id . ')">Editar</a></td>';
                return $edit;
            })
            ->addColumn('delete', function ($delete) {
                $delete = '<td class="text-center "><a onclick="show_delete_form(' . $delete->id . ')">Borrar</a></td>';
                return $delete;
            })
            ->rawColumns(['edit', 'delete'])
            ->make(true);
    }
    return view('admin.controlpanel');
}

La ruta delete_register que muestra la datatable:

   function delete_register(Request $request)
{
    $id = $request->id;
    $user = DB::table('users')->where('id', $id)->first();
    
    if ($user->id == Auth::user()->id) {
        return response()->json("same_admin");
    } else {
        $user_delete = DB::delete('delete from users where id = ?', [$id]);
        
        if ($user_delete == 1) {
            return response()->json(true);
        } else {
            return response()->json(false);
        }
    }
}

Gracias de antemano

7
  • una pregunta ya identificaste si el evento se duplica en el javascript o cuando llega a tu php?
    – user46896
    Commented el 19 jun. 2021 a las 15:02
  • puedes remplazar esto: $('#remove_btn').click(function(e){ por esto: $(document).off('click.req', '#remove_btn'); $(document).unbind('click.req', '#remove_btn'); $(document).on('click.req', '#remove_btn', function(e, xhr, settings){
    – user46896
    Commented el 19 jun. 2021 a las 15:05
  • Una pregunta: ¿esto console.log('/admin/show-delete-form/' + id); muestra siempre en consola el id que debería borrarse realmente? No conozco Laravel, pero esta lógica aquí me parece al menos confusa: $delete = '<td class="text-center "><a onclick="show_delete_form(' . $delete->id . ')">Borrar</a></td>'; ¿$delete es al mismo tiempo la cadena que estás construyendo y un objeto con una propiedad id? Yo pondría cada ID en un sitio del que lo pueda recuperar sin ningún riesgo (en el value del button por ejemplo), y lo recuperaría con this en Javascript).
    – A. Cedano
    Commented el 19 jun. 2021 a las 15:34
  • Además, no veo por qué haya que recargar la tabla cada vez ¿? Simplemente, puedes eliminar el elemento en el servidor, notificar al cliente cuando esto ocurra y quitar esa fila de la tabla. No tiene mucho sentido recargarla cada vez ¿no?
    – A. Cedano
    Commented el 19 jun. 2021 a las 15:40
  • eso es necesario cuando trabajas con datatables.net para actualizar el cache de tabla... no es html plano.
    – user46896
    Commented el 19 jun. 2021 a las 15:41

1 respuesta 1

1

tienes un problema con los eventos amarrados al DOM y tratas de hacer triger a un elemento agregado por jquery, eso no funciona y debes implementar la limpieza de eventos y la delegacion de eventos de jquery, tambien recomiendo agregarle un namespace al evento para diferenciarlos de otros.

puedes remplazar esto:

$('#remove_btn').click(function(e){

por esto:

$(document).off('click.req', '#remove_btn'); // limpieza de eventos con off
$(document).unbind('click.req', '#remove_btn'); // limpieza de eventos con unbind

$(document).on('click.req', '#remove_btn', function(e, xhr, settings){ // delegacion de eventos a document y uso de namespace de evento click.req

2
  • Muchas gracias :)
    – Angel
    Commented el 20 jun. 2021 a las 18:19
  • @Angel si la rwspuesta soluciona el problema puedes marcarlo como resuelto
    – user46896
    Commented el 21 jun. 2021 a las 0:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.