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.

Sobre la Descarga

En este post se visualiza unicamente el código jquery , en el caso que toda la aplicación consta de 5 archivos , estos son clientesGrid.php clientForm.php layout.php clase.php e index.php. Estos quedan disponibles posterior a la descarga

Código Jquery

/**
 * Autor: Juan Vergara B.
 * Web: https://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();
    })

})

Botón para descarga con aporte en PayPal (articulo n°1)

Ir a Descargas

Sobre programación web

• 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
• Un ejemplo de ABM usando Ajax - PHP - MySQL
• Usando jquery para modificar elementos del HTML
• Usar PDO para conectarse a MYSQL
• Cómo detectar el navegador usando JavaScript
• Cómo desarmar un notebook HP Compaq Presario C700
• Proyecto Intranet: Ordenes de servicio y ventas

Fotografía

• Michelles Jaque
• Beatriz Cabrera Zapata

Poesías

• Mini Poesías - Constanza Gonzales
• Sobre las decisiones - Constanza Gonzales

Últimas Publicaciones

• Enviar correos usando un formulario desde sitio web o localhost con PHPMailer
• Cómo crear un cuadro de búsqueda al estilo Google
• Sistema de LogIn con verificación de email y recuperación de contraseña usando PHP
• Demostración Jquery UI Selectable usando php y bases de datos mysql
• Subir, insertar, actualizar, borrar imágenes con PHP y MySQL
• Calculadora IMC usando JavaScript
• Select Dependientes con Ajax MySQL PHP
• Expresiones regulares en PHP
• Cómo convertir datos MySQL en formato JSON en PHP
• Visualizar datos en una tabla html con mysqli
• Siembras: Aplicación en Laravel 5.5