Posts Tagged ‘ hijax

Ajax y jQuery 6/6 – Procesando formularios con validaciones

VN:F [1.9.22_1171]
Rating: 3.8/5 (5 votes cast)

Siguiendo con el ejemplo visto en el artículo anterior sobre la serie de Ajax y jQuery, usemos el mismo ejemplo en el cual habíamos creado un script super sencillo y genérico para hacer que nuestro menú utilice llamadas asíncronas al servidor y agreguemos la funcionalidad de envío a nuestro formulario de contacto. Los archivos del ejemplo anterior los puedes descargar de aquí.

El objetivo de este artículo será agregar validaciones a nuestros formularios enviados por Ajax, ya que el envío en sí se encuentra explicado en el artículo sobre Hijax.

Recordemos el ejemplo anterior

El código del ejemplo anterior para la página de contacto es el siguiente.

<?php sleep(1) ?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link href="style.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="jquery-1.5.min.js"></script>
        <script type="text/javascript" src="ajax.js"></script>

    </head>
    <body>

        <div id="loading"><img alt="Cargando"  src="loading.gif" /></div>

        <div id="mainmenu">
            <ul id="menu">
                <li><a href="inicio.php" class="ajax">Inicio</a></li>
                <li><a href="acercade.php" class="ajax">Acerca de</a></li>
                <li><a href="contacto.php" class="ajax">Contactos</a></li>
            </ul>
        </div>

        <div id="content">
            <h1>Contacto</h1>

            <form action="procesar_contacto.php">
                <label for="nombre">Nombre:</label>
                <input type="text" name="nombre" id="nombre" /><br />
                <label for="asunto">Asunto:</label>
                <input type="text" name="asunto" id="asunto" /><br />
                <label for="comentario">Comentario:</label>
                <textarea cols="30" rows="5" name="comentario" id="comentario"></textarea><br />
                <input type="submit" value="Enviar" />
            </form>
        </div>

    </body>
</html>

Leer mas

Ajax y jQuery 5/6 – Menú Ajax implementando Hijax

VN:F [1.9.22_1171]
Rating: 4.3/5 (3 votes cast)

Para continuar con la gente que quiere seguir viendo ejemplos sobre la serie de Ajax y jQuery, les tengo preparado un ejemplo más completo, muy sencillo, implementando peticiones asíncronas en los links de un menú. Por supuesto si hacemos esto vamos a usar la idea de Hijax para asegurarnos de que el sitio funcione con y sin Ajax.

Comencemos sin Ajax

El HTML que usaremos de ejemplo, como así también el CSS será muy básico para no desconcentrarnos del punto inicial del Ajax usado con jQuery. Básicamente se trata de un menú creado con una lista no ordenada (<ul><li>). En primer lugar les dejo los archivos del mini sitio sin absolutamente una línea de JavaScript, completamente funcional. Veamos el ejemplo de la primera página.

» inicio.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link href="style.css" rel="stylesheet" type="text/css" />

    </head>
    <body>

        <div id="mainmenu">
            <ul id="menu">
                <li><a href="inicio.php">Inicio</a></li>
                <li><a href="acercade.php">Acerca de</a></li>
                <li><a href="contacto.php">Contactos</a></li>
            </ul>
        </div>

        <div id="content">
            <h1>Bienvenidos</h1>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
        </div>

    </body>
</html>

Como se muestra en el código, vemos una lista que será nuestro menú. Contiene tres links a tres páginas, inicio.php, acercade.php y contacto.php. Las tres páginas solo contienen información estática aunque podría sin problema obtener información de la base de datos y hacer cualquier proceso normal. Lo único que tenemos que tener en cuenta para el ejemplo es que la información para cada página está dentro de un div con id=”content”. Esto lo usaremos para obtener la información del servidor.
Leer mas

Ajax y jQuery 2/6 – Implementando Hijax

VN:F [1.9.22_1171]
Rating: 3.3/5 (3 votes cast)

Entendiendo el concepto de Hijax

Demos continuidad al artículo anterior sobre Ajax y jQuery agregando un concepto muy importante a la tecnología Ajax.

El concepto de Hijax es muy interesante aunque realmente no lo suelo escuchar mucho y realmente me costo un poco encontrar una manera de implementarlo, más por el hecho de encontrar una manera sencilla de hacerlo y sin dar tantas vueltas antes que por desarrollar código.

Básicamente se trata de no permitir que nuestro código Ajax elimine la posibilidad de que la funcionalidad normal de nuestra página continúe normalmente. Cuando empezamos a usar Ajax nos entra como una desesperación de usarlo en todo y considero que ese concepto no es el más acertado ya que hay que tener en cuenta a los clientes que no pueden interpretar JavaScript o cuando una página está aún cargando y los usuarios ya quieren dar click a los elementos.

Para ir entendiendo el concepto utilicemos un ejemplo que me parece bastante interesante: twitter.com. No se si lo habrán notado pero cuando entran al sitio y quieren ingresar el usuario y contraseña vemos que hay un botón “Iniciar Sesión”, el cual tiene dos comportamientos diferentes

  • Si el JavaScript necesario ya fue descargado veremos que abre un div para que introduzcamos los datos
  • En caso de que todavía no fue descargado y ya lo presionamos nos daremos cuenta que directamente nos redirecciona a una página diferente para ingresar los datos.

Leer mas