Say goodbye to Microsoft. Now.

Say goodbye to Microsoft. Now.

Jquery Tags input autocomplete. 1.3

Ya e mejorado el script de Jquery Tags input como lo habia dicho, compatible con jquery 1.5 y jquery ui 1.8.10, le e echo varias mejoras:

El parametro autocomplete ahora acepta sctring, array y object, los string y array los pone directamente como source del autocomplete, y si se le pasa un objeto es igual que el jquery ui autocomplete, se podran documentar mas en la la pagina de Jquery ui autocomplete.

Tambien le e echo otras pequeñas correcciones pero que no son muy importantes. espero pronto sacar otra versiona themable compatible completamente con jquery ui.

Aqui esta el archivo: Tags input

Tutorial: Codeigniter y AJAX, manejando solicitudes.

A la hora de trabajar en codeigniter con eventos o llamadas AJAX pues el framework tiene herramientas muy precarias para trabajar con este tipo de solicitudes, trabajar con ello,  por ello nosotros tenemos que hacer nuestras propias funciones que nos ayuden a trabajar con este tipo de peticiones.(Eso es lo que a mi me gusta de este framework, que te ayuda en muchas cosas pero hay muchas otras que tu tienes que aprender, y que si ya lo tuvieras echo pues no aprenderías)

¿Como reconocer una llamada AJAX?

Lo primero que tenemos que estar claro es que una solicitud AJAX es casi igual que una solicitud normal, pero a la hora de programar es de suma importancia saber si es AJAX o no, porque de acuerdo al tipo de solicitud debemos retornar algo completamente diferente, lo cual si no se hace correctamente pues nos va a dar tronco de errores que nos puede costar hasta el trabajo, para solucionar esto hay varias opciones:

• Enviar una variable en las solicitudes AJAX: a esto me refiero a que cuando hagamos una solicitud AJAX mandemos una variable más, y después en el código reconozcamos  si se envia o no.
• Crear un método aparte solo para las llamadas AJAX:(la primera que use) una solución es crear un método aparte dentro del controlador para la llamada AJAX, es buena pero genera mas código innecesario y en ciertos casos repetir mucho código.
• Utilizar HTTP_X_REQUESTED_WITH para saber si es AJAX o no:(la que uso actualmente) desde el javascript se envía una cabecera que se llama HTTP_X_REQUESTED_WITH que tiene como valor XMLHttpRequest, que permite del lado del servidor saber que esa es una llamada AJAX.

Ahora bien, yo comenzé con la segunda opción, la cual es una buena idea pero me genero muchos problemas porque a veces cuando hay algún problema con los datos enviados re-direcciono al inicio y muestro un mensaje de error, pero al hacer esto me mostraba la ventana de inicio completa, y eso no era lo que quería(eso me costo perder un trabajo). Pero después averiguando descubrí que en los últimos años a habido una estandarización en lo que se refiere a las llamadas AJAX en la mayoría de los framework donde envian una cabecera que se llama HTTP_X_REQUESTED_WITH y que con esta cabecera se puede averiguar fácilmente si es o no una llamada AJAX. Entonces con simplemte poner 1 linea de codigo averiguo si es o no una llamada AJAX:

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest')

Por supuesto como no vamos a andar pegando todo ese poco de lineas en todos los lugares donde los necesitemos podemos crear una librería o helper donde pongamos una función que nos devuelva el valor y así facilitarnos la vida, vamos a crear la librería ajax.php y pegamos este código:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Ajax{
 function isAjax()
 {
  return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest';
 }
}

Con eso en nuestro controlador solo debemos poner: $this->ajax->isAjax() y ya nos dira si es o no una solicitud ajax. Bueno asta aquí este tutorial, espero que les sea de utilidad y lo implementen en sus proyectos, me despido hasta la próxima.

Tutorial: Jquery ajax

¿Que es AJAX?

Ajax es el acronimo de Asynchronous JavaScript And XML,  es una forma de desarrollo web que permite la creacion de paginas web interactivas y aplicaciones RIA (Rich Internet Applications). Ademas de que tambien forma parte esencial de la Web 2.0. El Ajax se ejecuta del lado del cliente y pèrmite mantener una comunicacion constante con el servidor, permitiendo modificar la informacion que ve el usuario sin necesidad de recargar la pagina.

El Ajax asi no lo sepamos ya forma parte del internet y de nuestra vida, aplicaciones como facebook, twitter, gmail, etc ya la usan, por nombrar algunas, el unico que falta eres tú.


El framework de jquery posee una completa suite de herramientas para trabajar con ajax, esta suite tiene funciones para trabajar con json, html, xml y js, además que es muy configurable por si queremos una carga sincronica o asincronica.

¿Cual es la utilidad de el AJAX?

El ajax es muy util principalmente para crear aplicaciones web que no requieran estar recargandose para funcionar, la comunicacion ajax entre cliente y servidor siempre es mas ligera que la comunicacion asincronica por lo cual se puede aumentar racionablemete la velocidad de la pagina, adémas tambien nos permite aumentar la interraccion del usuario con la pagina, y asi de esa manera mejor la experiencia del usuario.

El ajax es tan util que se pueden crear una pagina completa que muestre informacion nada más sin necesidad de php, asp o java. Ya que se puede ir cargando dinamicamente paginas dentro del nuestro servidor y mostrarlo donde queramos sin mucho problema.

¿Que es y como se usa $.ajax() ?

Es una función que realiza una peticion http ajax al servidor y despues permite manejar la respuesta, ya sea un error o no, ademas de que tambien permite facilmente cambiar el tipo de solicitud, caracteres, parametros, tipos de dato, etc. Primero les voy a mostrar las tres principales eventos de nuestra llamada:


Success(data, textStatus, jqXHR):

Esta es la función que se llama cuando la solicitud ajax a sido exitosa. pasa tres variables, data: es la informacion que devuelve la pagina, textStatus: que es el estatus de la solicitud y jqXHR que es el objeto XMLHttpRequest.

error(jqXHR, textStatus, errorThrown)

es la función que se llama cuando una llamada ajax no es exitosa, y nos permite manejar ese error para avisar al usuario. Entre los parametros que se pasan a la función estan, jqXHR que es el objeto XMLhttpRequest, textStatus que es una cadena de texto que describe el tipo de error pueden ser: "timeout", "error", "abort", and "parsererror", y por ultimó errorThrown cuando ocurre un error http devuelve una cadena con el error exacto.

complete(jqXHR, textStatus)

Es la función que se llama cuando la solicitud AJAX a finalizado, teniendo exito o no, esta función devuelve el objeto jqXHR y el estatus de la solicitud los posibles valores que puede tener son: "success", "notmodified", "error", "timeout", "abort", or "parsererror".

Ahora les voy a mostrar los parametros más importantes en las llamadas ajax:

• url: donde colocaremos la dirección de nuestra solicitud.
• data: es la información enviada al servidor, puede ser una cadena de texto o un objeto.
• dataType: donde se especifica el tipo de data que se esta esperando del servidor, y dependiendo del tipo de dato jquery hace algo al respecto, por ejemplo si decimos que es un script jquery lo trae y de una ves lo ejecuta, los tipos de datos soportados son: xml, html, script, json, jsonp y text.
• type: aqui es donde se especifica el tipo solicitud si POST o GET, predeterminado es GET.

Para mas información sobre jquery pueden visitar http://api.jquery.com/jQuery.ajax/.

Funciones para trabajar con ajax en jquery.


Realmente en jquery hay una sola funcion principal para trabajar con ajax que es $.ajax, el resto solo son metodos mas cortos de la funcion anteriror, que ya traen algunos parametros agregados. Las siguientes funciones llamadas metodos del lado corto.

• $.load( url, [ data ],[complete(responseText, textStatus, XMLHttpRequest)]):
  
  Carga informacion de el servidor y despues la pone en el elemento HTML que corresponda.
  ejemplo: $('#result').load('ajax/test.html');
  
  
• $.get( url, [data], [success(data, textStatus, jqXHR)], [dataType]):
  
  Hace una petición get en el servidor, permite especificar el tipo de dato que se espera y después permite manejar la respuesta.
  
  
• $.getJSON(url, [data], [success(data, textStatus, jqXHR)]):
  
  Carga variables codificadas en json del servidor por el método GET.
  
  
• $.getScript(url, [success(data, textStatus)]):
  
  Cara un script del servidor y después lo ejecuta.
  
  
• $.post(url, [data], [success(data, textStatus, jqXHR)], [dataType]):
  
  Hace una solicitud al servidor por el método POST.
  
  

Jquery tambien trae funciones de ayuda para hacer algunas actividades regulares que tienen que ver con ajax y formularios, otras para manejar eneventos y otras para configurar las llamadas ajax, aqui les dejo una lista, después las explicare:

• $.serialize()
• $.param()
• $.serializeArray()
• $.ajaxPrefilter()
• $.ajaxSetup()

New Jquery 1.6 (changelog)

Ya salio jquery 1.6, acaba de salir este 3 de mayo, la verdad es que salio con mucha velocidad esta versión de jquery, y trae algunos cambios, desde la mejora de velocidad y reparación de algunas bugs, hasta algunas funciones nuevas que van a ser muy interesantes,  empezando porque la función .data() que hace un mapeo de un objeto, y permite almacenar o obtener valores sobre elementos del DOM, pues cuando importa valores de un elemento se an cambiado algunos nombres para estar mas apegado al estandar HTML5 y la w3c.

También fueron creadas dos funciones más .prop(), .removeProp(), y cambios en .attr(), ahora en la versión 1.6 pues se a separado lo que son los atributos de un objeto del DOM y lo que son las propiedades, prop por supuesto es para las propiedades y prop para los atributos, Antes de la versión 1.6, no había una división clara entre lo que son las propiedades del DOM y los atributos ahora, an sido divididas completamente y debemos prestar mucha atención a esto, los atributos del DOM son la parte estática del documento, es decir devuelven los atributos del documento, y las propiedades representan la parte dinámica del documento. es decir en un input text, al acceder al documento la función prop("value")  va a retornar lo mismo que attr("value"), pero sin embargo cuando un usuario escriba algo la función prop("value") va a tener lo que el usuario escribió nuevo, y attr("value") lo original.

Ademas también se a agregado el selector focus, que ya trabaja correctamente en todos los navegadores, lo que nos devolverá es el elemento que posee el focus actualmente. Tambien cabe destacar que las funciones is(), find() y closest() aceptan elementos del DOM y objetos de jquery.

Otras funciones nuevas en la version 1.6 de jquery:
deferred.always()
deferred.pipe()
jQuery.holdReady()

.promise()

Espero que esta información les halla sido de utilidad, si quieren algo mas detallado sobre los cambios aqui les dejo los link sobre los cambios y mejoras echas en la version 1.6 de jquery.

http://api.jquery.com/category/version/1.6/

http://blog.jquery.com/2011/05/03/jquery-16-released/