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
775 user pc 2017-06-04 Otros Países Editar Borrar
778 hvhjgk esdt 2017-06-14 México Editar Borrar
779 te ter 0004-01-04 Guatemala Editar Borrar
780 sda sdaa 0000-00-00 Otros Países Editar Borrar
781 Carlod Sigarreta 2017-06-12 Chile Editar Borrar
783 tegdsf gdsfgsdf 1989-01-01 España Editar Borrar
784 gerson villarroel 2017-06-21 Bolivia Editar Borrar
785 gustavo dsa 0000-00-00 Colombia Editar Borrar
786 joaquin quenta 2017-05-12 bolivia Editar Borrar
788 dd ddd 2017-06-14 México 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
• Demostración Jquery UI Selectable usando php y bases de datos mysql


Anuncios / Ads