Posts Tagged ‘ jQuery

Guía de Symfony2 – Capítulo 11-B – Integrando jQuery

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

En respuesta al capítulo anterior sobre Ajax hemos preparado unos ejemplos de implementación usando jQuery para el capítulo publicado el día de hoy.

Como les mencionaba en el artículo anterior para utilizar Ajax la programación es JavaScript y para esto lo haremos utilizando jQuery un framework muy potente y sencillo.

En este capítulo se explica como importar el archivo .js que se descarga del sitio oficial de jQuery, utilizaremos un ejemplo ya visto en el capítulo 9 – Manipulando datos con Doctrine en donde mostrábamos un listado de artículos haciendo que  dicho listado sea buscado asíncronamente luego de haber renderizado la página por medio de un botón.

Este capítulo será útil para los que necesiten importar cualquier framework JavaScript no solo para implementar Ajax, como por ejemplo ExtJS, tinymce, lightbox, etc.

Ahora que se entiende como utilizar jQuery dentro de nuestro proyecto Ajax les invito a pasar por los siguientes artículos de la categoría de jQuery y Ajax

 

Guía de Symfony2 – Capítulo 11 – Integrando AJAX

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

Hoy se ha publicado el capítulo 11 de la guía de Symfony2 donde @maycolalvarez explica como Symfony nos provee formas de saber cuando un request fue ejecutado por medio de una llamada asíncrona.

También explica que Symfony2 es un framework PHP por lo que no da soporte para realizar las llamadas Ajax en realidad ya que esto se hace con JavaScript.

Ya existen varios frameworks JavaScript que nos proveen funcionalidad de Ajax como por ejemplo jQuery que hasta el momento es mi favorito y programar en peticiones asíncronas se vuelve realmente fácil.

Si les interesa saber como usar jQuery para Ajax les puedo recomendar los siguientes artículos de este blog, todos dentro de la categoría de jQuery y Ajax

Programación para móviles con jQuery Mobile

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

jQuery mobile es un framework dependiente de jQuery. A la fecha se encuentra en la versión “RC1″ como se puede ver en el blog oficial. Aunque aún es un proyecto que está en etapa de crecimiento, promete mucha facilidad para el desarrollo de aplicaciones Web orientadas a dispositivos móviles por lo que me gustaría hacer una pequeña introducción al mismo creando un proyecto que nos permita ver algunas de sus características principales.

Si quieres ver una comparativa con Sencha Touch y un resumen de sus características puedes leer el artículo jQuery mobile vs Sencha Touch para dispositivos móviles.

Lo interesante de jQuery mobile, es que no se escriben largas líneas de programación sino que usas etiquetas HTML con atributos definidos por el framework y al momento de mostrar la página, esto es leído por jQuery y lo toma como metadatos para crear la interfaz del usuario, algo muy útil si tu especialidad no es el diseño.

Creemos nuestra primera página con jQuery mobile

Lo primero que tendremos que hacer es escribir el código básico de nuestra página. Para esto veamos cual es la estructura inicial necesaria y vayamos discutiéndola. Leer mas

jQuery mobile vs Sencha Touch para dispositivos móviles

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

En estos días estuve haciendo un comparativo entre el nuevo framework de jQuery para dispositivos móviles llamado jQuery mobile, y lo he comparado con el de Sencha, llamado Sencha Touch.

Ambos ya tienen una gran trayectoria trabajando con JavaScript.  jQuery es hoy en día muy utilizado en sitios de gran porte y tiene dos proyectos más a parte del CORE mismo llamados jQuery UI y el recientemente incorporado jQuery mobile. Mientras jQuery UI crea componentes Web muy interesantes y realmente fáciles de configurar, jQuery mobile, que aún no ha nacido del todo, se especializa en crear interfaces y componentes para dispositivos móviles. También existen varios plugins desarrollados por la comunidad en el sitio oficial.

Sencha a su vez ya tenía un framework, robusto en extremo, llamado ExtJS que permite crear interfaces y componentes sumamente ricos en dinamismo como ellos mismos lo demuestran usándolo en sus ejemplos y su API. También tenían ya el Ext GWT que es básicamente un ExtJS integrado al GWT de Google. Hace ya unos meses han liberado la versión oficial de Sencha Touch orientado a dispositivos móviles.

Como vemos, ambos ya tienen su gran trabajo aportado al mundo de la programación Web y es por esta razón que me puse a investigar un poco sobre los dos para notar algunas diferencias y semejanzas. Leer mas

Symfony 1.4, jQuery y Ajax

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

Habiendo dejado mucho tiempo de escribir artículos sobre Symfony me gustaría hablarles hoy sobre la utilización de Ajax con jQuery dentro de nuestro Framework PHP. Antes de leer este artículo recomiendo la lectura de los artículos de la serie de jQuery y Ajax en donde se explica como generar de una manera muy sencilla peticiones asíncronas al servidor utilizando la librería JavaScript jQuery. En estos artículos verán el concepto erróneo que muchas veces tenemos sobre Ajax y entenderán la idea sobre Hijax.

Symfony en sus versiones anteriores contaba con helpers interesantes para la creación de links y formularios utilizando Ajax mediante prototype. Así como existe hoy en día el helper para link_to() existía un link_to_remote() que era capaz de crear el código JavaScript necesario para la llamada Ajax. Con el tiempo, en las versiones más maduras del framework esto fue eliminado y se creó un plugin que utiliza jQuery llamado sfJqueryReloadedPlugin que continúa con las funciones más utilizadas. El enlace al plugin lo pueden encontrar aquí donde podrán ver la documentación necesaria.

La idea de este artículo NO es sobre la utilización del plugin sino sobre cómo ejecutar las llamadas Ajax directamente desde cero para entender la idea y poder hacer lo que necesitemos sin depender del plugin.

Como veíamos en los artículos de la serie sobre jQuery y Ajax, repetimos varias veces que la llamada asíncrona es simplemente un request al servidor y que cualquier cosa que escribamos en la salida estándar de la página procesadora es devuelto como response al cliente. La misma idea la manejaremos aquí ya que nada en absoluto cambia.
Leer mas

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