Eliminar registros con AJAX y jQuery

Una manera para no recargar toda la página web al momento de eliminar algún registro de nuestra base de datos, es realizándolo con Ajax, para que sea un poco más animado e intuitivo para el usuario, podemos iluminar el registro a eliminar indicando que esta desapareciendo, como lo hace WordPress al eliminar comentarios.

Para nuestro ejemplo tendremos que incluir estos scripts en nuestro HTML:



Luego seguiremos dándole algún estilo con CSS a las filas.

Esta seria la estructura HTML a utilizar para nuestro ejemplo, tendríamos que hacerlas dinámicas en un caso real, jalar de la base de datos y recorrer los registros.

Eliminar Registro 1
Eliminar Registro 2

Con esto podemos probar nuestra funcionalidad.

Demo

 

Post original: Animated AJAX Deletion using jQuery

También te puede interesar

4 Comments

  1. Bitacoras.com
    jun 12, 2010 @ 07:46:12

    Información Bitacoras.com…

    Valora en Bitacoras.com: Una manera para no recargar toda la pagina al momento de eliminar algún registro de nuestra base de datos, es realizándolo con Ajax, para que sea un poco más animado e intuitivo para el usuario, podemos iluminar el registr……

  2. Edith
    abr 16, 2011 @ 18:29:42

    ¡Hola! Primero que todo, buen artículo. Y espero no te moleste que postee otra manera de poder llevarlo a cabo, a mi punto de vista, más corta para implementar.

    Usé el metodo que propusiste en un sistema que estoy programando, en donde puedes eliminar, modificar e ingresar campos en el mismo archivo, todo vía AJAX y jQuery, sin embargo … al ingresar un registro nuevo y sumarlo a la tabla (vía append()), el método que propones queda sin capacidad de eliminar el nuevo registro, por el hecho que el js no reconoce el nuevo “a.eliminar” agregado.. Cosa lógica, claro.

    Una nueva propuesta… listar los datos corresponientes, y que cada “a” llame a la funcion eliminar via

    href=”javascript:eliminarReg()”, por ejemplo. y que esta funcion cumpla el objetivo del codigo

    $(‘a.delete’).click(function(e)
    {
    …….
    }

    En fin, mi humilde opinión. Quizá algo tarde por la antigüedad del post… espero le sirva a alguien más que se pase por estos lares.

    Gracias, nuevamente, por el código “iluminador”

    Saludos!

    • craftyman
      abr 30, 2011 @ 21:17:27

      Hola edith,
      Gracias por el aporte…

      Saludos cordiales.

  3. enio
    abr 17, 2011 @ 20:25:47

    sería mucho mas funcional que trabaje directamente con una base de datos