Entradas

Mostrando las entradas etiquetadas como AJAX

Rellenar SELECT con AJAX y jQuery

Uno de los usos más básicos con AJAX es rellenar combos (SELECT). Pero no por básico dejar de ser a veces complicado. Lo primero que debemos saber es que las funciones AJAX de jQuery utilizan la codificación UTF-8 tanto para recibir como para enviar datos. Existen mil maneras de pasar los datos con AJAX aunque las más lógicas serían las que utilizan formatos unificados para el tráfico de datos como son XML y JSON. Particularmente a mi me gusta mucho más utilizar JSON pero en Chrome si creamos un objeto JSON a partir de un array numerado el objeto resultante se ordena obviando el orden que se le haya dado previamente . Rellenando un SELECT con XML Lo primero que haremos será construir un objeto XML codificado en UTF-8 para ello podemos ayudarnos de funciones como utf8_encode en caso de que los valores vengan codificados en ISO. Aquí es dejo un ejemplo de un XML $xml = new XmlWriter(); $xml->openMemory(); $xml->startDocument('1.0', 'UTF-8'); $xml-...
1 comentario
Sigue leyendo

Enviar archivos con AJAX y jQuery en HTML5

Imagen
Con la evolución de los navegadores y la llegada de HTML5 ya no es necesario utilizar librerías extras para simular subir archivos por AJAX, la mayoría de estas librerías lo que hacían era utilizar FLASH o hacer un IFRAME para capturar esta subida de archivos. Con HTML5 ya no es necesario esto. Esto es gracias a la introducción del objeto FormData que nos permite crear formularios al vuelo. Asignar un formulario existente a un objeto FormData: var formElement = document.getElementById("someFormElement");   var formData = new FormData(formElement); O puedes recorrer el formulario con jQuery para solo agregar los campos que te interesan: var formData = new FormData(); $('#someFormElement :input').each(function(){         var input = $(this);         switch (input.attr('type')){             case "checkbox":         ...
Publicar un comentario
Sigue leyendo

jQuery, ajax, chrome y tabs

Hoy ha ocurrido algo muy curioso, tenemos un código que envía por ajax una petición al servidor y el dato devuelto lo asimila otra función para enviar un formulario, veamos el código: $.ajax({ type: "POST" , url: "carga.php?Accion=Identifica" , data: "variable=" +valor, async: true , contentType: "application/x-www-form-urlencoded" , dataType: "text" , success: function (tipo){ enviarFormulario(tipo,valor); } }); La única desventaja es que enviar un formulario desde dentro de la función success en chrome es identificado como un pop-up no como una nueva ventana o un nuevo tab, en firefox si funciona correctamente, la solución paso por declarar una variable anterior que guarde los datos recogidos del ajax, el ajax declararlo como NO asíncrono y luego enviar el formulario fuera. Curioso sin dudas ¿os ha pasado? Actualización: Código de la función que envía el formulario function enviarFormulario(tipo,dato){ var...
2 comentarios
Sigue leyendo

Plugin jquery jqtransform, errores

Embellecer formularios es una tarea bastante dura con HTML, actualmente hay innumerables plugins para hacer este tipo de tareas pero el que he encontrado más sencillo de implementar y utilizar es jqtransform para jquery, aunque no está exento de fallos o de deficiencias notables, por ejemplo: al cargarse los estilos de los formularios si un select es modificado por ajax los nuevos option no se muestran, hay que crear un código especial para agregar los nuevos option de manera que sean compatibles (yo no lo he hecho) el plugin autocomplete de jquery ui no muestra la imagen de carga al procesar los datos, esto supongo que sea porque sobre escribe los estilos y no muestra la imagen. el mismo plugin anterior no redimensiona correctamente el tamaño del input dejándolo más pequeño, a un tamaño de 16 px por lo que antes de escribir debemos utilizar el método width de jquery para cambiar el tamaño del input a uno más grande. Para solucionar el punto 1...
2 comentarios
Sigue leyendo

Plugin de jquery ui: autocomplete

Me gustó mucho que en la nueva versión de jquery incluyesen esta nueva funcionalidad autocomplete pero aún me parece un poco escasa la documentación en castellano para ella, la he utilizado y no es difícil pero lo malo es que en caso de error no se puede visualizar nada para saber a que se debe, algunas cosas que me he topado son las siguientes: en la distribución oficial no está incluido el archivo ui-anim_basic_16x16.gif necesario en el estilo de este plugin cuando está buscando los datos en archivo search.php de la demo incluye una función array_to_php que es posible utilizarla con versiones de php anteriores a la 5, pero para 5+ es mejor utilizar la propia función de json_encode de PHP. admite 2 tipos de array para convertirlos a json, el array normal de toda la sin índices y un array con cada valor que es un array con 3 claves id, label y value (ejemplo[] = array (‘hola’,’hi’,’hello’) ó array_push(array(‘id’=>’MAD’,’label’=>’Madrid, Españ...
Publicar un comentario
Sigue leyendo

Redirecciones con htaccess mientras actualizas

Cuando tenemos una web con php y múltiples páginas dinámicas puede ser un incordio re direccionar cuando estás de mantenimiento o actualizando la web, una forma muy sencilla es hacerlo mediante el archivo htaccess del servidor web apache, veamos el código y luego lo explico: DirectoryIndex construction.html RewriteEngine on RewriteCond %{REQUEST_URI} !/construction.html$ RewriteCond %{REQUEST_URI} !/ajax/get_hours.php$ RewriteCond %{REMOTE_HOST} !^0\.0\.0\.0 RewriteCond %{REMOTE_HOST} !^localhost RewriteRule ^.*\.(php|html)$ http://domain/construction.html [R=302,L] En la primera línea le estoy diciendo que si acceden a mi web solo con el dominio, mi página principal es la de la redirección. En la tercera y cuarta digo las páginas para las cuales no se va a aplicar la redirección, la línea 4 es una página en php que llamo por ajax para el calculo de la hora en GMT y tener un contador en la web que me diga según el uso horario del usuario cuanto falta para cargar ...
Publicar un comentario
Sigue leyendo

Tratamiento de respuestas xml con ajax

Bien veamos como tratar elementos que recibimos de respuesta como XML al ejecutar AJAX, para ello existen varios métodos del objeto XMLHttpRequest, veamos en un ejemplo: // obtenemos el tag con el nombre deseado xmlhttp.responseXML.getElementsByTagName('nombre_tag') // obtenemos la cantidad de tags con este nombre xmlhttp.responseXML.getElementsByTagName('nombre_tag').length // sacamos el objeto del tag i de este nombre xmlhttp.responseXML.getElementsByTagName('nombre_tag').item(i).firstChild // el valor de este elemento xmlhttp.responseXML.getElementsByTagName('nombre_tag').item(i).firstChild.data Con estos valores podremos recorrer el archivo XML y realizar cualquier roceso con los datos que recibamos, asignarlo a valores de formularios, ssacarlos en pantalla, etc, etc.
Publicar un comentario
Sigue leyendo

Error con la codificación de la respuesta

algo que me trajo de cabeza era un error con una respuesta generada al llamar a un documento en el server que ejecutaba un script para crear un archivo XML y es que aunque definas el archivo XML como: $xml_response = new XmlWriter(); $xml_response->openMemory(); $xml_response->startDocument('1.0', 'ISO-8859-1'); o sea defines que es codificación ISO-8859-1, para internet explorer esto no importa, con firefox si funciona pero explorer ni caso y es que hay que definir además el header de esta respuesta, o sea que la primera línea del código de esta url que queremos ejectar del lado del servidor tiene que ser: header("Content-Type: text/xml; charset=ISO-8859-1"); y es que si no te darían errores como (aclaro que el problema es IE como siempre): IE error: Automation server can't create object - JavaScript
Publicar un comentario
Sigue leyendo

Método onreadystatechange del objeto XMLHttpRequest

Con este método lo que hacemos es tratar la respuesta recibida por parte del servidor, ¿Cómo sabemos cuando se ha ejecutado correctamente? Para ello utilizamos: ajaxNEW.readyState Este devolverá los siguientes valores: 0 - Sin inicializar 1 - Abierto (acaba de llamar open) 2 - Enviado 3 - Recibiendo 4 - A punto por ejemplo: ajaxNEW.onreadystatechange=function() { if (ajaxNEW.readyState==4) // pongo la rspuesta tal y como la recibo dentro del contenedor // la propiedad responseText me devuelve la respuesta tal y como se genera en el server. contenedorLugar.innerHTML = ajaxNEW.responseText; } Si ademas queremos compreobar que se ejecutó correctamente la página una vez llegado as readyState == 4 nos bastaría con hacer otra comprobación: if (xmlhttp.readyState==4) { if (xmlhttp.status==200) alert("URL Exists!") else if (xmlhttp.status==404) alert("URL doesn't exist!") else alert("Status is "+xmlhttp.status) } La propiedad status almacena...
Publicar un comentario
Sigue leyendo

Método open del objeto XMLHttpRequest

Una vez que ya hemos creado el objeto XMLHttpRequest (ver entrada anterior) entonces podemos realizar las llamadas al servidor sin necesidad de recargar la página al completo. estas llamadas se hacen a través de la función open y tiene los siguientes parámetros: ajaxNEW=makeAJAX(); ajaxNEW.open("GET",url,true); el primer parámetro es el tipo de llamada y puede ser GET, POST o HEAD, luego veremos cada uno en detalle. el segundo es la url que vamos a ejecutar y de la cual obtendremos la respuesta. el tercero es si queremos hacerlo de forma asíncrona o no, generalmente es TRUE para que así no se recargue la página. esta función tiene otros 2 parámetros para el acceso de páginas restringidas por usuario y contraseña pero nunca los he utilizado, los parámetros serían : usuario y password. veamos ahora las distintas llamadas al método open. GET Esta función carga la respuesta generada de ejecutar la url en el div contenedor: function carga(contenedor,url){ var contenedorLugar; ...
Publicar un comentario
Sigue leyendo

Código para crear un objeto XMLHttpRequest

function makeAJAX() { var xmlhttp=false; // Entre estos ids podemos obviar comodamente // la versión Msxml2.XMLHTTP.7.0 var ids = ["Msxml2.XMLHTTP.7.0", "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "Msxml2.XMLHTTP.3.0", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]; /*@cc_on @*/ /*@if (@_jscript_version >= 5) // JScript gives us Conditional compilation, // we can cope with old IE versions. // and security blocked creation of the objects. for(var i=0; !xmlhttp && i try { xmlhttp = new ActiveXObject(ids[i]); } catch(ex) { xmlhttp = false; } } @end @*/ if (!xmlhttp && typeof XMLHttpRequest!='undefined') { try { xmlhttp = new XMLHttpRequest(); } catch (e) { xmlhttp=false; } } /* * Esta condición es realmente obsoleta pues * actualmente todos los navegadores modernos * ya vienen con compatibilidad inn...
1 comentario
Sigue leyendo

Introducción a AJAX y el objeto XMLHttpRequest

Este artículo es una recopilación de datos provenientes de varias fuentes en internet y varios códigos que poco a poco he ido aplicando en el transcurso del tiempo. La mayor parte de este documento es una actualización y traducción de un artículo que podéis encontrar en la siguiente dirección http://www.jibbering.com/2002/4/httprequest.html con fecha de enero de 2006. Las cosas desde ese momento no han cambiado mucho en AJAX aunque si se han actualizado algunos componentes del objeto XML HTTP Request sobre todo para Internet Explorer, siendo el cambio más novedoso que desde IE8 ya existe compatibilidad innata con el objeto XMLHttpRequest no siendo ya necesaria la creación de ActiveXObject, esta compatibilidad se había venido testeando por parte de Microsoft desde IE7 pero la compatibilidad innata sólo la han alcanzado en IE8. ¿Qué es el objeto XMLHttpRequest y por qué utilizarlo? Tanto IE, Safari, Mozilla, Konqueror, Ice Browser, Opera como todos los navegadores que se basen en los mo...
Publicar un comentario
Sigue leyendo