1

He tratado de eliminar registros de la base de datos mysql con ajax pero al eliminar me lleva a otra página con el mensaje determinado despues de eliminar el registro. Pero yo quiero que no me cargue otra página y el mensaje me lo muestre en la misma ventana.

IMPORTANTE: Esto lo quiero hacer mediante un enlace no con un formulario ni botón. Este es el código:

<a id="delete-user" href="inc/delete-user.php?id=<?php echo $row['USU_id'] ?>"><i class="align-middle" data-feather="trash"></i></a>

El código de JS es este:

//DELETE USER
$("#delete-user").on("click", function () {

    $.ajax({
        type: "GET",
        url: "inc/delete-user.php",
        data: $("#delete-user").serialize(),
        success: function (result) {
            $("#success-delete-user").html(result);
            $("#success-delete-user").fadeIn("slow");
            $("#success-delete-user").delay(4000).fadeOut("slow");

        }
    });

    return false;
});
3
  • Que error te suelta? Commented el 3 may. 2019 a las 6:31
  • Quta el href. Es el culpable de la redirección Commented el 3 may. 2019 a las 7:19
  • Hay otra opción de enviar el $id sin el href?. De la forma que comente elimino datos pero me redirecciona.
    – MartiPE
    Commented el 3 may. 2019 a las 13:38

3 respuestas 3

1

Como dice Albert Lorenzo, debes cortar la funcionalidad nativa de la etiqueta <a>. Hagamos unos ajustes

  1. Cambiemos delete-user de ser un ID a ser una clase. ¿Por qué? Quiero suponer que ese fragmento de código se cicla tantas veces como usuarios haya. El problema es que cuando le digas al DOM que borre el ID al que le diste click irá a recoger el primer ID que coincida de arriba hacia abajo y siempre eliminará el primero, por que el ID debe ser ÚNICO. Lo bueno de la clase es que puedes tener tantos elementos como quieras y siempre el DOM estará pendiente de cuando le den click a la clase.

  2. Borremos el href dado que no lo necesitas por que no vas a redirigir, vamos a setearlo en # pero ocuparemos las bondades de HTML5 y la inclusión de atributos personalizados. A esto agregaré un atributo que se llama data-id y tiene el ID del usuario actual

    <a class="delete-user" href="#" data-id="<?php echo $row['USU_id'] ?>">
      <i class="align-middle" data-feather="trash"></i>
    </a>
    
  3. Ahora cambiemos el selector que estará pendiente de la escucha al dar click, en lugar de delegar directo a .delete-user, le pasaremos esa tarea al DOM, hacerlo a un selector directo el algunas ocaciones falla (Aún no se por qué)

  4. Al enviar la información sacaremos del selector al que se le dió click el data-id dado que .serialize() es para obtener una cadena de un formulario no de una etiqueta ancla.

    //DELETE USER
    $(document).on("click", ".delete-user", function ( e ) {
        //Con esto detenemos la función nativa del selector
        e.preventDefault(); e.stopPropagation();
    
        //Recuperamos el ID del atributo data-id
        let id = $(this).data('id');
    
        //Enviamos el AJAX
        $.ajax({
            type: "GET",
            url: "inc/delete-user.php",
            data: { id }
            success: function (result) {
                $("#success-delete-user").html(result);
                $("#success-delete-user").fadeIn("slow");
                $("#success-delete-user").delay(4000).fadeOut("slow");
    
            }
        });
    });
    

Esto debería funcionar a la perfección, avísame si te funcionó

1
  • Mi estimado Alberto Siurob, eres un genio!!!. Funcionó de maravilla. Mil Gracias!
    – MartiPE
    Commented el 3 may. 2019 a las 16:49
0

Tienes que cortar el flujo de ejecución con el método preventDefault()

Concretamente:

$("#delete-user").on("click", function () {
    $(this).preventDefault();
    //TODO
}
2
  • No me funciona! lo que pasa es que yo estoy enviando el ID por GET mediante un enlace <a></a> como haría en este caso?
    – MartiPE
    Commented el 3 may. 2019 a las 13:44
  • Me he colado con el this, necesitas recoger el evento y aplicarle el método preventDefault(), this apunta a #delete-user, fallo mío. Arriba tienes la solución por cierto Commented el 3 may. 2019 a las 18:07
0

Se me ocurriría guardar el Id de la URL en una variable y esa variable es la que se envía al PHP que hará la eliminación, y en el <a> quitas el href es decir:

<a id="delete-user"><i class="align-middle" data-feather="trash"></i></a>

$("#delete-user").on("click", function () {

    var datosUrl = "<?php echo $row['USU_id'] ?>";
    $.ajax({
      type: "GET",
      url: "inc/delete-user.php",
      data: {
              usuId: datosUrl
            },
      success: function (result) {
        $("#success-delete-user").html(result);
        $("#success-delete-user").fadeIn("slow");
        $("#success-delete-user").delay(4000).fadeOut("slow");

      }
    });
    return false;
});
2
  • no me recoje el $id me sale este error: ´Notice: Undefined index: id in C:\xampp\htdocs\orden-de-produccion\inc\delete-user.php on line 6 No hay usuarios para eliminar.´
    – MartiPE
    Commented el 3 may. 2019 a las 13:47
  • Ok, pero si tienes acceso a ese ID? Es decir, antes de enviar la petición Ajax, hazle un alert o on console.log para saber si antes de la petición tenemos acceso a ese ID Commented el 3 may. 2019 a las 15:21

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.