Ejemplo de ABM usando Ajax - PHP - MySQL
21 de enero de 2015

Ejemplo de ABM usando Ajax - PHP - MySQL

Listado de usuarios ABM


Id Nombre Apellido Fecha de Nacimiento Pais Editar Borrar
640 Jonathan2 herrea 1996-12-07 Guatemala Editar Borrar
652 Marcelo Camacho 2017-01-05 Bolivia Editar Borrar
658 juanjo rodriguez 2017-02-10 Argentina Editar Borrar
659 Nose tampoco 2017-02-06 Argentina Editar Borrar
661 Andres hernan forero 0000-00-00 Colombia Editar Borrar
662 wefrewr werewq 2017-02-21 Estados Unidos Editar Borrar
664 Leonardo CAMACHO 2017-02-15 Argentina Editar Borrar
665 OZZ MAN 2017-02-14 México Editar Borrar
666 luisberto ber 2017-02-18 Colombia Editar Borrar

Sobre AJAX

AJAX, es una técnica de desarrollo web para crear aplicaciones interactivas. Éstas se ejecutan en el cliente, es decir, en el navegador del usuario, y mantiene comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre la misma página sin necesidad de recargarla. Esto significa aumentar la interactividad, velocidad y usabilidad en la misma. La primera aplicación conocida fué el Outlook Web Access provisto en la versión 2000.


La demo ABM

Las siglas ABM significan altas, bajas, modificaciones . Se usa para referirse a las funciones básicas que se pueden hacer con las bases de datos. En este ejemplo se aplican esas funcionalidades en conjunto con ajax, y la función setInterval de javascript permite que ademas de interactuar con la base de datos, la misma información se pueda ver sin recargar en todos los pcs casi de forma instantanea.


Código Jquery

/**
 * Autor: Juan Vergara B.
 * Web: http://www.ideaschile.cl
 *
 */
$(document).ready(function(){ //cuando el html fue cargado iniciar
    //actualiza cada x segundos
    var contador = 1;
    setInterval(function() {$('#content').load('index.php',{action:"refreshGrid"});
                            console.log("ABM load "+contador++ +"");}, 120000 );
    //añado la posibilidad de editar al presionar sobre edit
    $('.edit').live('click',function(){
        //this = es el elemento sobre el que se hizo click en este caso el link
        //obtengo el id que guardamos en data-id
        var id=$(this).attr('data-id');
        //preparo los parametros
        params={};
        params.id=id;
        params.action="editClient";
        $('#popupbox').load('index.php', params,function(){
            $('#block').show();
            $('#popupbox').show();
        })

    })

    $('.delete').live('click',function(){
        //obtengo el id que guardamos en data-id
        var id=$(this).attr('data-id');
        //preparo los parametros
        params={};
        params.id=id;
        params.action="deleteClient";
        $('#popupbox').load('index.php', params,function(){
            $('#content').load('index.php',{action:"refreshGrid"});
        })

    })

    $('#new').live('click',function(){
        params={};
        params.action="newClient";
        $('#popupbox').load('index.php', params,function(){
            $('#block').show();
            $('#popupbox').show();
        })
    })

    $('#client').live('submit',function(){
        var params={};
        params.action='saveClient';
        params.id=$('#id').val();
        params.nombre=$('#nombre').val();
        params.apellido=$('#apellido').val();
        params.fecha=$('#fecha').val();
        params.pais=$('#pais').val();
        $.post('index.php',params,function(){
            $('#block').hide();
            $('#popupbox').hide();
            $('#content').load('index.php',{action:"refreshGrid"});
        })
        return false;
    })


    // boton cancelar, uso live en lugar de bind para que tome cualquier boton
    // nuevo que pueda aparecer
    $('#cancel').live('click',function(){
        $('#block').hide();
        $('#popupbox').hide();
    })

})

Enlace para descarga

Descargar Código


Anuncios / Ads


Comentarios

Nombre
Email
Comentario

Artículos

• Validación de formularios usando características de HTML5
• Método para insertar registros en MySQL usando PHP
• Obtener datos desde MySQL y mostrar el resultado en una tabla
• Los colores y sus códigos RGB
• Cómo evitar los comentarios spam
• Creando un login simple con jquery, php y mysql
• Conversor de Medidas Online
• Visualizar datos en una tabla parte II: Aplicando estilo css
• Constanza Gonzalez: Mini Poesía
• Constanza Gonzalez: Ensayo - Sobre las Desiciones
• Un ejemplo de ABM usando Ajax - PHP - MySQL
• Usando jquery para modificar elementos del HTML
• Michelles Jaque
• Beatriz Cabrera Zapata
• Lista comercios asociados al CyberMonday 2015
• Cómo desarmar un notebook HP Compaq Presario C700
• Enviar correos desde localhost o sitio web con PHPMailer smtp
• Cuadro de busqueda instantanea en sitio web jquery-php
• Sistema de LogIn con verificacion de email y recuperacion de contraseña usando PHP
• Usar PDO para conectarse a MYSQL
• Proyecto Intranet: Ordenes de servicio y ventas
• Cómo detectar el navegador con JavaScript


Anuncios / Ads