lunes, 29 de septiembre de 2014

Datos de tipo objeto asignados por referencia con data()

Sobre el punto que comentábamos antes, sobre los objetos Javascript que se asignan por medio de data(), que siempre se hace por referencia, hemos creado otro ejemplo, del que simplemente vamos a colocar un enlace para verlo en funcionamiento y su código. http://www.desarrolloweb.com/articulos/ejemplos/jquery/core/data3.html 
El ejemplo es bastante similar al anterior, con la salvedad que se ha creado un par de acciones adicionales para almacenar en los elementos variables de tipo objeto. Luego, al operar sobre esos datos de tipo objeto, comprobamos que en realidad sólo existe un objeto compartido por todos los elementos a los que fue asignado. Es decir, no se hicieron copias del objeto, sino que se asignaron en los datos simplemente su referencia. Puede verse este ejemplo en marcha en una página aparte. 
El código completo se puede ver a continuación.

<html>
<head>
<title>Ejemplos de uso de la función data del core de jQuery</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("a.enlacealmacenar").click(function(evento){
evento.preventDefault();
var valorAlmacenado = $(this).data("midato");
var mensaje = "En el enlace <b>" + $(this).attr("id") + "</b> tiene el dato 'midato' como " +
valorAlmacenado;
var valorAlmacenado2 = $(this).data("miobjeto");
mensaje += "<br>Además, he leído un dato llamado 'miobjeto' con valor " + valorAlmacenado2;
$("#mensaje").html(mensaje);
});
$("#guardar").click(function(evento){
evento.preventDefault();
$("a").data("midato","mivalor");
$("#mensaje").html('He guardado en todos los enlaces un dato llamado "midato" con el valor
"mivalor"');
});
$("#guardarenlace1").click(function(evento){
evento.preventDefault();
$("#enlace1").data("midato","otro valor");
$("#mensaje").html('He guardado en el enlace1 un dato llamado "midato" con el valor "otro
valor"');
});
$("#guardarobjeto").click(function(evento){
evento.preventDefault();
$("a").data("miobjeto",$("#capapruebas"));
$("#mensaje").html('He guardado todos los enlaces un dato llamado "miobjeto" con el valor un
objeto que es el objeto jquery de seleccionar la capa con id "capapruebas"');
});
$("#operarobjetoenlace1").click(function(evento){
evento.preventDefault();
$("#enlace1").data("miobjeto").html("cambio el html del objeto que hay en el dato 'miobjeto'
del 'enlace1'");
});
$("#operarobjetoenlace2").click(function(evento){
evento.preventDefault();
$("#mensaje").html("Este es el HTML que hay en el objeto asociado a enlace2 en el dato
'miobjeto':<br>" + $("#enlace2").data("miobjeto").html());
});
});
</script>
</head>
<body>
<a href="#" id="enlace1" class="enlacealmacenar">Enlace 1</a>
<br>
<a href="#" id="enlace2" class="enlacealmacenar">Enlace 2</a>
<br>
<a href="#" id="enlace3" class="enlacealmacenar">Enlace 3</a>
<br>
<br>
<div id="mensaje">
Mensaje...
</div>
<br>
<ol style="line-height: 200%;">
<li>
<a id="guardar" href="#">guardar "midato" con valor "mivalor" en todos los enlaces</a>
</li>
<li>
<a id="guardarenlace1" href="#">guardar "midato" con valor "otro valor" en el enlace 1</a>
</li>
<li>
<a id="guardarobjeto" href="#">guardar "miobjeto" con una referencia a la capa de pruebas</a>
</li>
<li style="line-height: 100%;">
<a id="operarobjetoenlace1" href="#">Recuperar un objeto del enlace1 para hacer cosas con él
<SPAN style="font-size: 8pt; font-weight: bold">
PULSAR ESTE ENLACE SÓLO DESPUÉS DE HABER ALMACENADO EL OBJETO EN LOS ENLACES POR MEDIO DEL ENLACE DE
ESTA LISTA MARCADO COMO 3)
</SPAN>
</a></li>
<li style="line-height: 100%;">
<a id="operarobjetoenlace2" href="#">Recuperar un objeto del enlace2 para hacer cosas con él
<SPAN style="font-size: 8pt; font-weight: bold">
PULSAR ESTE ENLACE SÓLO DESPUÉS DE HABER ALMACENADO EL OBJETO EN LOS ENLACES POR MEDIO DEL ENLACE DE
ESTA LISTA MARCADO COMO 3)
</SPAN>
</a></li>
</ol>
<br>
<br>
<div id="capapruebas">
Este es el texto de una capa de pruebas... con id="capapruebas"
</div>
</body>
</html>

Hemos visto diversos ejemplos de uso de data() y removeData(), métodos básicos de jQuery. Puede que ahora no se les encuentre mucha utilidad, pero nos servirán para resolver problemas futuros y entender cómo funcionan diversos plugins o componentes más avanzados de jQuery. 
Por lo que respecta al Core de jQuery, ya hemos visto diversas funcionalidades en desarrolloweb.com en artículos de este manual. Por ahora lo vamos a dejar por aquí, aunque hay diversos métodos del Core que no hemos llegado a ver. En los próximos artículos pasaremos página y comenzaremos a ver otros temas interesantes que nos permitirán explotar un poco más nuestra creatividad, poniendo en marcha utilidades más cercanas a lo que pueden ser nuestras necesidades del día a día.

domingo, 28 de septiembre de 2014

Consideraciones interesantes de data() y removeData() - III

Como se puede ver, se está extrayendo el valor almacenado en el enlace actual, que recibe el evento. Con $(this) obtenemos el objeto jQuery del elemento que ha recibido el evento, que es el enlace sobre el que se ha pulsado y no todos los enlaces. Con el método data("midato"), invocado sobre $(this), obtenemos el valor del dato "midato" almacenado en el enlace que fue pulsado solamente. 
Luego se muestra un mensaje para indicar el valor que había en el dato. Pero claro, este código, como es común para todos los enlaces, tiene que acceder también a $(this) para saber qué enlace en concreto fue el que se pulsó. Para identificar el enlace se hace $(this).attr("id"), que devuelve el atributo "id" del enlace sobre el que se hizo clic. 
A continuación se puede ver el código completo de esta página.

<html>
<head>
<title>Ejemplos de uso de la función data del core de jQuery</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("a").click(function(evento){
evento.preventDefault();
valorAlmacenado = $(this).data("midato");
$("#mensaje").html("En el enlace <b>" + $(this).attr("id") + "</b> tiene el dato 'midato' como
" + valorAlmacenado);
});
$("#guardar").click(function(evento){
$("a").data("midato","mivalor");
$("#mensaje").html('He guardado en todos los enlaces un dato llamado "midato" con el valor
"mivalor"');
});
$("#guardarenlace1").click(function(evento){
$("#enlace1").data("midato","otro valor");
$("#mensaje").html('He guardado en el enlace1 un dato llamado "midato" con el valor "otro
valor"');
});
});
</script>
</head>
<body>
<a href="#" id="enlace1">Enlace 1</a>
<br>
<a href="#" id="enlace2">Enlace 2</a>
<br>
<a href="#" id="enlace3">Enlace 3</a>
<br>
<br>
<div id="mensaje">
Mensaje...
</div>
<br>
<button id="guardar">guardar "midato" con valor "mivalor" en todos los enlaces</button>
<br>
<button id="guardarenlace1">guardar "midato" con valor "otro valor" en el enlace 1</button>
</body>
</html>

Si se desea, se puede ver el ejemplo en marcha en una página aparte. ht

sábado, 27 de septiembre de 2014

Consideraciones interesantes de data() y removeData() - II

El código de los elementos HTML será el siguiente:
<a href="#" id="enlace1">Enlace 1</a>
<br>
<a href="#" id="enlace2">Enlace 2</a>
<br>
<a href="#" id="enlace3">Enlace 3</a>
<br>
<br>
<div id="mensaje">
Mensaje...
</div>
<br>
<button id="guardar">guardar "midato" con valor "mivalor" en todos los enlaces</button>
<br>
<button id="guardarenlace1">guardar "midato" con valor "otro valor" en el enlace 1</button> 

Ahora veamos cómo aplicar eventos a los elementos de la página, para almacenar datos y mostrarlos. Comencemos por el código de los eventos de los botones.

$("#guardar").click(function(evento){
$("a").data("midato","mivalor");
$("#mensaje").html('He guardado en todos los enlaces un dato llamado "midato" con el valor
"mivalor"');
});

Con este código estamos almacenando datos en todos los enlaces. Cabe fijarse que con la función jQuery $("a") obtenemos un objeto jQuery donde están todos los enlaces de la página. Luego, al invocar data() sobre ese objeto, estamos almacenado ese dato en todos los enlaces existentes.

$("#guardarenlace1").click(function(evento){
$("#enlace1").data("midato","otro valor");
$("#mensaje").html('He guardado en el enlace1 un dato llamado "midato" con el valor "otro
valor"');
});

En este otro código del evento click para el segundo botón, almacenamos "otro valor" sobre el dato de antes, pero sólo lo hacemos sobre el enlace 1, dado que hemos utilizado el selector $("#enlace1"), con el identificador único del primer enlace. Y ahora podríamos ver el código para asignar un evento a todos los enlaces, para que al pulsarlos nos muestre lo que haya en el dato almacenado con data(), si es que hay algo.

$("a").click(function(evento){
evento.preventDefault();
valorAlmacenado = $(this).data("midato");
$("#mensaje").html("En el enlace <b>" + $(this).attr("id") + "</b> tiene el dato 'midato' como "
+ valorAlmacenado);
});

Como se puede ver, estamos creando un evento click, pero lo estamos haciendo sobre los tres enlaces que hay en la página a la vez, dado el selector utilizado en la función jQuery $("a"). Luego el código del evento será el mismo para los tres enlaces. Lo primero que se hace es un evento.preventDefault() que permite que el enlace no tenga el comportamiento típico (ir a la URL del href). 
A continuación hacemos:

valorAlmacenado = $(this).data("midato");

viernes, 26 de septiembre de 2014

Consideraciones interesantes de data() y removeData() - I

Ahora veremos algunos puntos interesantes y nuevos ejemplos sobre el funcionamiento de los métodos data() y removeData() de jQuery. 
Existen algunos puntos que debemos conocer sobre el funcionamiento de estos métodos que no hemos explicado todavía en el artículo anterior, en el que se comenzó a tratar acerca de data() y removeData(). Veamos a continuación una serie de consideraciones: 
Admite cualquier tipo de dato: Podemos guardar lo que deseemos por medio del método data(). Los ejemplos anteriores hemos guardado simplemente cadenas de texto, pero soportaría cualquier tipo de variable, numérica, un array o incluso un objeto Javascript o jQuery. 
Se guarda un dato por cada elemento del objeto jQuery selecionado: En caso que en el objeto jQuery sobre el que estemos almacenando cosas con data() haya referencias a varios elementos de la página, el dato se almacena en todos los elementos. (recordemos que, según lo explicado anteriormente en desarrolloweb.com, un objeto jQuery puede tener seleccionados varios elementos de la página, como todos los enlaces presentes, los elementos de una determinada clase CSS, etc. dependiendo del selector escogido al hacer uso de la función dólar) 
Los objetos se almacenan por referencia: En el caso que estemos almacenando un objeto Javascript con data() sobre uno o varios elementos, no se copia el objeto, sino que se asigna por referencia. Esto quiere decir que no se harían copias independientes del objeto a guardar, sino que permanecería tal cual y lo que se asignaría como dato es una referencia a ese único objeto. 
Ahora, para investigar un poco sobre estas posibilidades, hemos creado un par de ejemplos un poco más complejos que hacen uso de los métodos data() y removeData(). Son ejemplos más avanzados, que hacen uso de algunas cosas que no hemos explicado todavía en este manual de jQuery. No obstante, vendrá bien verlos para aprender algunos usos de estas funcionalidades. 

Para empezar, quiero mostrar una página de ejemplo donde existen tres enlaces y dos botones. Al pulsar cualquiera de los enlaces mostraremos el contenido de un dato almacenado en ellos con data(). Los botones, por su parte, servirán para almacenar contenidos en datos sobre esos enlaces. Además tendremos una capa con id="mensaje" que nos servirá para mostrar cosas por pantalla. Podemos ver el ejemplo en marcha en una página aparte.

jueves, 25 de septiembre de 2014

Método data() Core jQuery - IV

Sería interesante ver el código fuente completo de esta página, para hacernos una idea más exacta de cómo se integrarían todos estos elementos

<html>
<head>
<title>Ejemplos de uso de la función data del core de jQuery</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#guardar").click(function(evento){
var valor = document.formul.valor.value;
//Esta misma línea de código se puede codificar así también con jQuery
//var valor = $("#valor").attr("value");
$("#division").data("midato",valor);
$("#division").html('He guardado en este elemento (id="division") un dato llamado "midato" con
el valor "' + valor + '"');
});
$("#leer").click(function(evento){
valor = $("#division").data("midato");
$("#division").html('En este elemento (id="division") leo un dato llamado "midato" con el
valor "' + valor + '"');
});
$("#eliminar").click(function(evento){
$("#division").removeData("midato");
$("#division").html('Acabo de eliminar del elemento (id="division") el dato llamado
"midato"');
});
});
</script>
</head>
<body>
<div id="division">
En esta división (elemento id="division") voy a guardar datos con la función data y luego los voy a
leer
</div>
<br>
<form name="formul">
Escribe un valor a guardar, leer o eliminar:
<input type="text" name="valor" id="valor">
<br>
<input type="button" value="guardar dato" id="guardar">
<input type="button" value="leer dato" id="leer">
<input type="button" value="eliminar dato" id="eliminar">
</form>
</body>
</html>

De nuevo, dejamos el enlace al ejemplo en marcha. Para seguir os indicamos la lectura del siguiente artículo de este manual, donde puedes obtener explicaciones adicionales y ejemplos de uso de estos métodos data() y removeData().

miércoles, 24 de septiembre de 2014

Método data() Core jQuery - III

Como se puede ver, primero se recibe el texto del campo de texto que había en el formulario. Para ello se muestran dos maneras de hacerlo: 
• A través de la jerarquía de objetos del navegador, con document.formul.valor.value 
• A través de su identificador, con un método de jQuery llamado attr() que sirve para recuperar el valor de un atributo HTML pasado por parámetro sobre el elemento que recibe el método. 
Este modo de obtener el atributo value del campo de texto está comentado, pues sólo lo quería señalar, para que se vea el modo de acceder a un elemento de formulario utilizando las funciones del framework Javascript jQuery. 
Luego, se guarda el dato "midato" con el valor que se recuperó del atributo value del campo de texto. Para ello utilizamos el método data() tal como comentábamos. 
Por último se muestra un mensaje en el HTML del elemento con id="division", por medio del método html() de jQuery, para informar sobre la acción que acabamos de realizar. Ahora mostramos el código para asignar un comportamiento al evento click sobre el segundo botón:

$("#leer").click(function(evento){
valor = $("#division").data("midato");
$("#division").html('En este elemento (id="division") leo un dato llamado "midato" con el valor
"' + valor + '"');
});

Como se puede ver, se recupera el valor del dato "midato" guardado sobre el elemento "#division" (etiqueta HTML con id="division"), y se almacena en una variable. Luego se crea un mensaje para mostrar el valor del dato. Para acabar, tenemos el código del evento click sobre el botón de eliminar el contenido de un dato, que hace uso de removeData().

$("#eliminar").click(function(evento){
$("#division").removeData("midato");
$("#division").html('Acabo de eliminar del elemento (id="division") el dato llamado "midato"');
});

Como se verá, el método removeData() se invoca sobre el elemento que tiene el dato que pretendemos eliminar. Más tarde se muestra un mensaje informando sobre la acción que se ha realizado. 
Para comprobar el funcionamiento de estos métodos habría que crear un dato, escribiendo el valor en el campo de texto y pulsando el botón "guardar dato". Luego podríamos leer ese dato con el botón "leer dato". Por último podríamos eliminar el dato con el botón "eliminar dato". Si, una vez eliminado pulsamos sobre el botón de "leer dato" veremos que el valor del dato aparece como "undefined", puesto que ese dato ha sido borrado (esto también ocurre si no se ha guardado ningún dato todavía, por ejemplo cuando se acaba de cargar la página).

martes, 23 de septiembre de 2014

Método data() Core jQuery - II

Método removeData() 

Este método sirve para eliminar un dato de un elemento y su funcionamiento es tan simple como enviar por parámetro el dato que se quiere eliminar del elemento.
$("#capa").removeData("midato")
Con esta línea habríamos eliminado el dato llamado "midato" del elemento con identificador "capa".
Ejemplo completo de los métodos data() y removeData() del Core de jQuery
Veamos un ejemplo completo del uso de estos métodos que acabamos de aprender. Se trata de una página que tiene un elemento sobre el que vamos a guardar datos. Además tiene tres botones para guardar un dato, leerlo y borrarlo. El dato que se guardará tendrá como valor lo que se haya escrito en un campo de texto que aparece también en la página. Podemos ver el ejemplo en marcha en una página aparte. Tenemos, para comenzar, un elemento de la página, que es donde vamos a guardar los pares dato-valor con data().
En esta división (elemento id="division") voy a guardar datos con la función data y luego los voy a leer.
Luego tendremos este formulario, que contiene el campo de texto así como los tres botones de los que hemos hablado.

<form name="formul">
Escribe un valor a guardar, leer o eliminar:
<input type="text" name="valor" id="valor">
<br>
<input type="button" value="guardar dato" id="guardar">
<input type="button" value="leer dato" id="leer">
<input type="button" value="eliminar dato" id="eliminar">
</form>

Ahora se trata de asignar los comportamientos a estos botones con Javascript, haciendo uso de jQuery. Este sería el script para agregar el evento click al botón de guardar datos.

$("#guardar").click(function(evento){
var valor = document.formul.valor.value;
//Esta misma línea de código se puede codificar así también con jQuery
//var valor = $("#valor").attr("value");
$("#division").data("midato",valor);
$("#division").html('He guardado en este elemento (id="division") un dato llamado "midato" con el
valor "' + valor + '"');
});

lunes, 22 de septiembre de 2014

Método data() Core jQuery - I

El método data() del core de jQuery sirve para almacenar información en los elementos de la página, en pares nombre de variable y valor. Veremos también el método removeData() para eliminar datos almacenados. 
Seguimos viendo componentes interesantes del "Core" de jQuery, donde están las clases y métodos más básicos de este framework Javascript. En esta entrega del manual de jQuery de DesarrolloWeb.com, explicaremos el uso del método data() y removeData(), que sirven para almacenar, consultar y eliminar cualquier tipo de dato en elementos de la página. 
En algunas ocasiones resulta útil almacenar variables u objetos en determinados elementos de la página. Aunque quizás no es una acción muy corriente en los primeros pasos con jQuery, en el futuro encontraréis que resulta útil y veréis herramientas y plugins que utilizan este mecanismo para su operativa. 
De modo que conviene al menos saber que esto es posible y conocer de qué manera podemos utilizar los elementos de la página para guardar cosas en ellos. Para ello vamos a comentar dos métodos distintos que forman parte del core de jQuery: 

Método data() 

Este método del objeto jQuery sirve tanto para guardar un dato en un elemento como para consultarlo. Según el número de parámetros que reciba, realiza una u otra acción. 
• Si recibe un parámetro data(nombre): devuelve el valor que haya en el dato cuyo nombre se pasa por parámetro. 
• Si recibe dos parámetros data(nombre, valor): almacena un dato, cuyo nombre recibe en el primer parámetro, con el valor que recibe en el segundo parámetro. Como data() es un método que pertenece al objeto jQuery, podemos almacenar estos pares (dato, valor) en cualquiera de los elementos que seleccionemos con la función jQuery(). Veamos un caso de uso simple. Por ejemplo tenemos un elemento de la página como este:

<div id="capa">
En esta división (elemento id="capa") voy a guardar y leer datos sobre este elemento.
</div>
Ahora podríamos usar le método data() de la siguiente manera:
$("#capa").data("midato","mivalor");
Con esta línea hemos guardado un dato llamado "midato" con el valor "mivalor", en el elemento con identificador (atributo id) "capa".
Ahora podríamos leer ese dato en cualquier momento para acceder a su valor, de la siguiente manera:
alert($("#capa").data("midato"));
En esta línea de código extraemos el dato "midato" del elemento con identificador "capa" y lo mostramos en una caja de alerta.
Podemos ver una página en marcha que hace uso de esas dos funciones.

sábado, 20 de septiembre de 2014

Método size() y propiedad length del core de jQuery - II

Propiedad length del objeto jQuery 

La propiedad length, que existe en cualquier objeto jQuery, nos sirve para obtener el número de elementos de la página que hemos seleccionado. Lo interesante de esta propiedad es que almacena directamente este valor, por lo que es más rápido y más aconsejable que calcular los elementos seleccionados con el método size(). Tanto el método size() con la propiedad length devolverán el mismo valor, siendo las únicas diferencias la mencionada rapidez adicional de la propiedad y el acceso a este valor, que como es una propiedad, se accede a través del operador punto, pero sin colocar los paréntesis después de length. Por ejemplo, veamos este código:

var ElementosMitexto = $(".mitexto");
alert ("Hay " + ElementosMitexto.length + " elementos de la clase mitexto");

Con la primera línea estamos utilizando la función jQuery para seleccionar todos los elementos de la página que tienen la clase CSS "mitexto". Con la segunda línea se muestra en una caja de alerta el número de elementos seleccionados con ElementosMitexto.length. Podemos ver el código completo de una página que hace uso de este método:

<html>
<head>
<title>propiedad length del core jQuery</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//selecciono todos los elementos de la clase "mitexto"
var ElementosMitexto = $(".mitexto");
//muestro el número de los párrafos encontrados
alert ("Hay " + ElementosMitexto.length + " elementos de la clase mitexto");
});
</script>
</head>
<body>
<p>Esto es un párrafo normal</p>
<p class="mitexto">Esto es un párrado de la clase "mitexto"</p>
<div>Un div normal</div>
<div class="mitexto">Ahora un div de la clase "mitexto"</div>
</body>
</html>

Para acabar, dejamos el enlace a una página donde se puede ver el ejemplo de la propiedad length del objeto jQuery en funcionamiento.

viernes, 19 de septiembre de 2014

Método size() y propiedad length del core de jQuery - I

Dos formas de acceder al número de elementos que hay en un objeto jQuery, a través del método size() y la propiedad length. 
Vamos a ver en este artículo cómo obtener el número de elementos que tiene el objeto jQuery. Como pudimos aprender previamente en nuestro manual de jQuery, este framework Javascript tiene como base la llamada "función jQuery" que devuelve el objeto jQuery, en el que hay uno o varios elementos de la página, según el selector que se le haya pasado. En un pasado artículo de DesarrolloWeb.com ya explicamos con detalle qué era la función jQuery y cómo utilizarla. Pues bien, ahora veremos rápidamente cómo saber cuántos elementos encontramos y seleccionamos por medio de esta función, lo que puede ser útil por diversos motivos al hacer código Javascript. 

Método size() del Core de jQuery 

Este método sirve, como decimos, para obtener el número de elementos seleccionados con la función jQuery. Simplemente devuelve el número de elementos que hay en el objeto, como un entero. Por ejemplo, veamos este código:

var parrafos = $("p");
alert ("Hay " + parrafos.size() + " párrafos en la página");


Con la primera línea selecciono todos los párrafos de la página y los meto en el objeto jQuery de la variable "parrafos". Mediante la segunda línea muestro el número de párrafos encontrados, con una llamada al método size(). No tiene más misterio, salvo que en jQuery existe otro modo de hacer esto, pero bastante más rápido. Podemos ver una página en marcha con este ejemplo de uso de size().

jueves, 18 de septiembre de 2014

Retornando valores en la función que enviamos a each

Ahora vamos a ver un par de posibilidades interesantes al utilizar each. Resulta que la función que enviamos como parámetro a each() puede devolver valores y dependiendo de éstos, conseguir comportamientos parecidos a los conocidos break o continue de los bucles Javascript. 
Si la función devuelve "false", se consigue detener por completo el proceso de iteraciones de each(). Esto es como si hiciéramos el típico "break". Si la función devuelve "true", se consigue pasar directamente a la próxima iteración del bucle. Es como hacer el típico "continue". Para ver estos dos casos realizaremos otro ejemplo de uso de each. 
Tenemos varios DIV, donde cada uno tiene un texto.

<div>red</div>
<div>blue</div>
<div>red</div>
<div>white</div>
<div>red</div>
<div>green</div>
<div>orange</div>
<div>red</div>
<div>nada</div>
<div>red</div>
<div>blue</div>

Ahora queremos hacer un recorrido a esos DIV y en cada uno, mirar el texto que aparece. Entonces colocaremos como color del texto del DIV el color que aprece escrito en el DIV. Pero con dos casos especiales:
 • Si el texto del DIV es "white", entonces no queremos hacer nada con ese elemento. 
• Si el texto del DIV es "nada", entonces detendremos el bucle y dejaremos de colorear los siguientes elementos. Esto lo podríamos hacer con el siguiente código:

$("div").each(function(i){
elemento = $(this);
if(elemento.html() == "white")
return true;
if(elemento.html() == "nada")
return false;
elemento.css("color", elemento.html());
});

Ahora podremos ver este ejemplo en funcionamiento en una página aparte.

miércoles, 17 de septiembre de 2014

Cómo funciona each - II

En la primera línea no estaríamos extendiendo la variable this con las funcionalidades de jQuery, luego no funcionaría. En la segunda línea, que es la que habíamos utilizado en el script de ejemplo, sí estamos extendiendo la variable "this" con la función jQuery. 
De ese modo, se puede invocar a cualquier método de jQuery sobre los elementos. 
Podemos ver un ejemplo en marcha que hace uso de ese script. 
Este sería su código fuente completo

<html>
<head>
<title>each del core de jQuery</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("p").each(function(i){
if(i%2==0){
$(this).css("background-color", "#eee");
}else{
$(this).css("background-color", "#ccc");
}
});
});
</script>
</head>
<body>
<p>Primer párrafo</p>
<p>Otro párrafo</p>
<p>Tecer párrafo</p>
<p>Uno más</p>
<p>y acabo...</p>
</body>
</html>

martes, 16 de septiembre de 2014

Cómo funciona each - I

Each es un método que se utiliza sobre un conjunto de elementos que hayamos seleccionado con la función jQuery. Con each realizamos una iteración por todos los elementos del DOM que se hayan seleccionado. 
El método each recibe una función que es la que se tiene que ejecutar para cada elemento y dentro de esa función con la variable "this" tenemos una referencia a ese elemento del DOM. Adicionalmente, la función que se envía a each, puede recibir un parámetro que es el índice actual sobre el que se está iterando. 
Quiero explicar las bondades de each() con un ejemplo. Por ejemplo, veamos esta línea de código:

$("p").css("background-color", "#eee");


Como ya sabemos, con $("p") seleccionamos todos los párrafos de la página. Luego con el método CSS asignamos un estilo, en este caso para cambiar el color del fondo. Esto en realidad jQuery lo hace con una iteración con todos los párrafos de la página, sin que tengamos que hacer nosotros nada más y es genial que se permita en el uso del framework. ¿Pero qué pasa si queremos cambiar el fondo de los párrafos utilizando colores alternos? En este caso no podemos hacerlo en una sola línea de código, pero each nos vendrá como anillo al dedo. Imaginemos que tenemos una serie de párrafos en la página y queremos cambiar el color de fondo a los mismos, de manera que tengan colores alternos, para hacer dinámicamente un típico diseño para los listados. 
Entonces podríamos hacer lo siguiente:

$("p").each(function(i){
if(i%2==0){
$(this).css("background-color", "#eee");
}else{
$(this).css("background-color", "#ccc");
}
});

Con $("p") tengo todos los párrafos. Ahora con each puedo recorrerlos uno a uno. Para cada uno ejecutaremos la función que enviamos como parámetro a each(). En esa función recibo como parámetro una variable "i" que contiene el índice actual sobre el que estoy iterando. Con if(i%2==0) estoy viendo si el entero del índice "i" es par o impar. Siendo par coloco un color de fondo al elemento y siendo impar coloco otro color de fondo. 
Como se puede ver, con la variable "this" tenemos acceso al elemento actual. Pero OJO, que este elemento no es un objeto jQuery, así que no podríamos enviarle métodos del framework jQuery hasta que no lo expandamos con la función jQuery. Así pues, tenemos que hacer $(this) para poder invocar al método css(). Por si no queda claro este punto mirar las diferencias entre estas dos líneas de código:

this.css("background-color", "#ccc");
$(this).css("background-color", "#ccc");

lunes, 15 de septiembre de 2014

Core/each: each del core de jQuery

Conozcamos con detalle el método each del core de jQuery, para ejecutar una función en cada uno de los elementos de un grupo. 

Hay algo que tenemos que tener en cuenta, en la medida de lo posible, cuando creamos código Javascript: crear un código de calidad y lo más corto posible. Para ello también nos facilitan mucho las cosas los frameworks y métodos como each(), que veremos en este artículo. 

El método each() pertenece al juego de funciones del CORE de jQuery, cuyas particularidades ya comenzamos a analizar en el manual de jQuery. Se trata de un método para realizar acciones con todos los elementos que concuerdan con una selección realizada con la función jQuery -también llamada función $()-. Útil porque nos da una manera cómoda de iterar con elementos de la página y hacer cosas con ellos más o menos complejas de una manera rápida y sin utilizar mucho código para definir el bucle.

domingo, 14 de septiembre de 2014

Otros usos de la función $() - III

Función jQuery pasando una función 

En la función $() una última posibilidad es pasarle como parámetro una función y entonces lo que tenemos es una función callback que se invoca automáticamente cuando el DOM está listo. Nota: Ya explicamos lo que era un callback en el artículo Callback de funciones jQuery En esa función podemos colocar cualquier código, que se ejecutará sólo cuando el DOM está listo para recibir comandos que lo modifiquen. Con ello, esta función nos vale perfectamente para hacer cualquier cosa dentro de la página que afecte al DOM. Ejemplo:

$(function (){
//Aquí puedo hacer cualquier cosa con el DOM
});

Este callback con la función jQuery $() sería una abreviatura de otro método que hemos visto repetidas veces a lo largo de este manual para definir acciones cuando el DOM está listo:

$(document).ready(function(){
//Aquí puedo hacer cualquier cosa con el DOM
});

Incluso podemos hacer varios callback, para agregar distintas acciones a realizar cuando el DOM está listo, las veces que queramos, igual que cuando definíamos el evento ready() sobre el objeto document.
Podemos ver el código de una página que hace uso de la función dólar, pasando por parámetro una función.

<html>
<head>
<title>función jquery</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(function (){
var documento = $("p");
documento.css("background-color", "#ff8833");
});
$(function (){
var documento = $("b");
documento.css("color", "#fff");
});
//si colocase aquí este código, no funcionaría, porque el DOM no estaría listo para realizar
acciones
//var documento = $("p");
//documento.css("background-color", "#ff8833");
</script>
</head>
<body>
<p><b>Párrafo</b>!!</p>
<p>Otro <b>párrafo</b></p>
</body>
</html>

Se puede ver en marcha en una página aparte. 
Hasta aquí hemos visto todas las posibilidades que existen para trabajar con la función jQuery. Realmente a lo largo de este manual ya la habíamos utilizado muchas veces y en lo sucesivocontinuaremos usándola, ya que cualquier cosa que deseemos hacer en una página web va a depender en algún momento de invocar a $() en alguna de sus variantes.

sábado, 13 de septiembre de 2014

Otros usos de la función $() - II

Función jQuery pasando elementos

Otro posible valor que se le puede enviar a la función jQuery es un elemento o una jerarquía de elementos del DOM, para extenderlos con las funcionalidades que aporta el framework para los elementos. Por ejemplo:

var documento = $(document.body);
documento.css("background-color", "#ff8833");


Con la primera línea creamos una variable llamada documento, a la que asignamos el valor que devuelve el método $() enviando el parámetro document.body. 
Nota: La variable document.body corresponde con un elemento del DOM de Javascript, que crea automáticamente el navegador y hace referencia al documento de la página. 
Con ello obtenemos un objeto que es el cuerpo de la página (document.body) al que le hemos agregado todas las funcionalidades del framework jQuery para los elementos. Así pues, en la línea siguiente, invocamos el método css() sobre la variable "documento", que es el propio documento de la página extendido. Por eso el método css(), que es de jQuery(), funciona sobre ese objeto. Algo como esto no funcionaría porque estaríamos intentando lanzar un método de jQuery directamente sobre el objeto DOM sin haberlo extendido:

document.body.css("background-color", "#ff8833");


No funcionará porque no podemos llamar a un método jQuery sobre un objeto DOM, si es que no lo hemos extendido con la función $(). 
Nota: Esta función acepta documentos XML y objetos Window, aunque no son propiamente elementos del DOM. 
Podemos ver ahora una página donde se encuentra este ejemplo en marcha.

viernes, 12 de septiembre de 2014

Otros usos de la función $() - I

La función jQuery(), o con su abreviación $(), tiene otros usos interesantes cuando le enviamos parámetros distintos a los vistos en el artículo anterior. 

En el pasado capítulo del manual de jQuery vimos unas primeras notas sobre el Core de jQuery y comenzamos a explicar la función jQuery(), que es la más importante en este framework Javascript. Ahora veremos como esta función, que también se puede acceder por medio del símbolo dólar $(), puede tener otras aplicaciones útiles, cuando recibe parámetros distintos a los que vimos anteriormente. 

Función jQuery pasando un HTML 

Una posibilidad de trabajar con la función jQuery es enviarle un string con un HTML. Esto crea esos elementos en la página y les coloca los contenidos que se indique en el string. Ojo, que el HTML tiene que estar bien formado para que funcione en cualquier navegador, esto es, que se coloquen etiquetas que se puedan meter en el BODY de la página y que todas las etiquetas tengan su cierre.

var nuevosElementos = $("<div>Elementos que creo en <b>tiempo de ejecución</b>.<h1>En
ejecución...</h1></div>");

Esto nos creará en la variable nuevosElementos los elementos HTML que hemos especificado en el string. Luego podríamos hacer lo que queramos con ellos, como colocarlos en la página con el método appendTo(), por ejemplo de esta manera:

nuevosElementos.appendTo("body");

Nota: el método appendTo() no pertenece al Core, pero nos viene bien utilizarlo y así hacer algo con los elementos que acabamos de crear.
Veamos el código completo de una página que hace uso de este ejemplo:

<html>
<head>
<title>función jquery</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var nuevosElementos = $("<div>Estos elementos ..</b>.<h1>Título...</h1></div>");
nuevosElementos.appendTo("body");
});
</script>
</head>
<body>
<p>Esto es el cuerpo de la página, que tiene poca cosa...</p>
</body>
</html>
Ahora, dejamos el link para ver el ejemplo en una página aparte.

jueves, 11 de septiembre de 2014

Función jQuery enviando un selector y un contexto - III

Si queremos, podemos utilizar el segundo parámetro opcional, que es el contexto. Con él podríamos conseguir seleccionar elementos que pertenecen a una zona concreta de nuestro documento. Por defecto el contexto es la página entera, pero lo podemos restringir de esta manera:

var inputs = $("input",document.forms[0]);
inputs.css("color", "red");


Con la primera línea conseguimos seleccionar todos los elementos INPUT que pertenecen al primer formulario de la página. Se devolverá un objeto jQuery que contiene todos los input seleccionados. Con la segunda línea, invocando el método css() sobre el objeto jQuery recibido, estaríamos cambiando el color del texto de esos elementos. Esto no seleccionaría los INPUT de otros formularios, como se puede ver en esta página de ejemplo. 
Ahora por completar un poco más estas notas, veamos otro ejemplo en el que seleccionamos todos los párrafos (etiqueta P), pero restringimos el contexto únicamente los que están en un DIV con id="div1".

var parrafos_div1 = $("p","#div1");
parrafos_div1.hide()

En la segunda línea lanzamos el método hide() sobre el objeto jQuery que contiene los párrafos seleccionados, con lo que conseguimos que se oculten. Podemos ver una página que con este ejemplo en marcha.
Contamos con un video que nos habla de la funcion $ en jQuery.
En el siguiente artículo veremos otros usos de la función jQuery() / función dólar $().

miércoles, 10 de septiembre de 2014

Función jQuery enviando un selector y un contexto - II

Este método css() no forma parte del core, pero sirve para cambiar atributos CSS de un elemento, entre otras cosas. Así pues, con esa línea cambiaríamos el color de fondo del elemento seleccionado anteriormente, que habíamos guardado en la variable elem1. 
Ahora veamos otro ejemplo de la selección de elementos con la función dólar.

var divs = $("div");
divs.css("font-size", "32pt");

Aquí seleccionamos todas las etiquetas DIV de la página, y les colocamos un tamaño de letra de 32pt. Podemos ver en una página aparte este pequeño script en uso. El código de esta página es el siguiente:

<html>
<head>
<title>función jquery</title>
<script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var elem1 = $("#elem1");
//podríamos haber escrito: var elem1 = jQuery("#elem1");
elem1.css("background-color", "#ff9999");
var divs = $("div");
//podríamos haber escrito: var elem1 = jQuery("#elem1");
divs.css("font-size", "32pt");
});
</script>
</head>
<body>
<div id="elem1">Este elemento se llama elem1</div>
<div id="elem2">Este otro elemento se llama elem2</div>
</body>
</html>

martes, 9 de septiembre de 2014

Función jQuery enviando un selector y un contexto - I

Este uso de la función sirve para seleccionar elementos de la página. Recibe una expresión y se encarga de seleccionar todos los elementos de la página que corresponden con ella, devolviendo un objeto jQuery donde se encuentran todos los elementos de la página seleccionados y extendidos con las funcionalidades del framework. 
Adicionalmente, podemos pasarle un contexto de manera opcional. Si no se le envía un contexto, selecciona elementos del documento completo, si indicamos un contexto conseguiremos seleccionar elementos sólo dentro de ese contexto. La expresión que debemos enviar obligatoriamente como primer parámetro sirve de selector. 
En ese parámetro tenemos que utilizar una una notación especial para poder seleccionar elementos de diversas maneras y la verdad es que las posibilidades de selección con jQuery son muy grandes, como veremos en el tema de "Selectores". Este paso de selección de elementos es básico en cualquier script jQuery, para poder actuar en cualquier lugar de la página y hacer nuestros efectos y utilidades Javascript sobre el lugar que deseemos. 
Veamos un uso de esta función:

var elem1 = $("#elem1");


Con esta línea de código habremos seleccionado un elemento de la página que tiene el identificador (atributo id del elemento HTML) "elem1" y lo hemos guardado en una nueva variable llamada elem1. La variable elem1 guardará entonces lo que se llama el objeto jQuery con el cual podremos trabajar, solicitando métodos o funciones de dicho objeto, para trabajar con el elemento seleccionado. 
Nota: Como hemos dicho, $() es un resumen o forma corta de invocar la función jQuery. También podríamos haber escrito la línea de esta manera: var elem1 = jQuery("#elem1"); 
Luego, podríamos hacer cualquier cosa con ese elemento seleccionado, como lo siguiente:

elem1.css("background-color", "#ff9999");

lunes, 8 de septiembre de 2014

Función jQuery o función $()

Veremos con detalle la función más importante de jQuery y para ello comenzaremos viendo su uso más común: seleccionar elementos de la página y obtener un objeto jQuery con los elementos seleccionados. 

Con el objetivo de seguir tratando el Core de jQuery, del que ya empezamos a hablar en este Manual de jQuery, vamos a explicar la función jQuery, también conocida como $(). El funcionamiento del Core de jQuery se basa en esta función. Como dicen en la propia documentación del framework, "Todo en jQuery está basado en esta función o la usa de alguna forma". La función jQuery sirve para hacer varias cosas, según los parámetros que le pasemos. El uso más simple es seleccionar elementos o grupos de elementos de una página web, pero también sirve para crear elementos sobre la marcha o para hacer un callback de funciones. En realidad esta función se invoca también con el símbolo dólar $(), lo que sería una manera resumida de utilizarla y que nos ahorrará bastantes caracteres en el código y a la postre, tiempo de descarga y peso de los scripts de la página. Veamos los distintos usos de esta función, según los parámetros que reciba.

domingo, 7 de septiembre de 2014

Core de jQuery - II

métodos útiles para hacer tareas reiterativas, que vamos a necesitar en las aplicaciones. Integra desde funciones que serán útiles en cualquier script, por sencillo que sea, hasta funciones menos recurridas pero que nos facilitarán la vida a hora de hacer código limpio, corto y reutilizable. Utilizaremos el Core para realizar cosas útiles con objetos, clases, datos, etc, pero realmente lo que más haremos será utilizar la función jQuery, que es el pilar fundamental sobre el que se basarán las aplicaciones. Core tiene las funciones clasificadas en diversos apartados: 

$() (La funcion jQuery): Es la función principal de jQuery, que además tiene diversas utilidades según los parámetros que se le envíen. Su utilidad principal es obtener elementos de la página. 
Accesorios de objetos: Es una gama de funciones de diversa y variada utilidad, que sirven de utilidad para hacer cosas con objetos, tales como iterar con cada uno de sus elementos, saber su tamaño, longitud, el selector o contexto con el que se obtuvo, obtener todos sus elementos DOM que contenga, etc. 
Trabajo con datos: Unas funciones útiles para trabajar con datos y asociarlos a elementos, una forma de guardar información adicional a elementos de la página. También tiene diversas funciones para trabajar con colas y administrar la salida y entrada de sus elementos. 
Plugins: Funciones que permiten extender los elementos jQuery para incorporar nuevos métodos, algo que se utiliza habitualmente a la hora de crear plugins para añadir funcionalidades a jQuery. 
Interoperabilidad: Funciones que permiten que jQuery no tenga problemas de compatibilidad con otras librerías Javascript que también suelen utilizar la función dólar $(). 

Nota: En el momento de escribir este manual estamos en la release 1.3.2, en la que se han publicado como novedad un par de métodos, de los clasificados en accesorios de objetos. Como debemos saber, de vez en cuando actualizan las librerías para incorporar nuevos métodos. En el próximo artículo comenzaremos a tratar a fondo el Core de jQuery, hablando de la función dólar $().

sábado, 6 de septiembre de 2014

Core de jQuery - I

El core de jQuery lo forman las funciones más recurridas y que forman la base sobre la que se asienta el cualquier cosa en este framework Javascript. 

Hasta este momento ya hemos publicado varios artículos en el Manual de jQuery de DesarrolloWeb.com, pero realmente lo que hemos visto es una mera introducción a las posibilidades del API, así como unas explicaciones básicas para empezar a trabajar con jQuery en nuestras páginas web. Sin embargo, nos gustaría ir publicando una documentación en español completa, para que cualquier desarrollador pueda aprender a fondo este framework Javascript y crear cualquier tipo de aplicación enriquecida del cliente. 

Las personas con un nivel medio-alto de Javascript y de programación orientada a objetos, con lo que hemos visto hasta el momento en el manual y la referencia del API jQuery, podrán con relativa facilidad adentrarse en características avanzadas del framework, pero para los demás y los que deseen una ayuda adicional, esperamos que este artículo y los siguientes puedan abrir un camino, sencillo de seguir, para aprender a hacer todo tipo de desarrollos con Javascript y jQuery. 

Comencemos pues por el inicio, tal como está en la documentación del sistema, tratando en primer caso el "Core". De todos modos, cabe decir que lo que hemos podido ver en los artículos anteriores de este Manual de jQuery, nos va a venir muy bien para poder entender todo lo que viene a continuación y sobre todo, poder poner en marcha ejemplos un poco más elaborados.

viernes, 5 de septiembre de 2014

Código de la página PHP que se invoca por Ajax

El código de la página PHP que traemos por ajax "pagina-lenta.php" es el siguiente:
<?php
sleep(3);
echo ("He tardado 3 segundos en ejecutar esta p&aactute;gina...");
?>

En realidad no tiene nada en especial. Simplemente hacemos un sleep(3) para ordenarle a PHP que espere 3 segundos antes de terminar de procesar la página y enviarla al cliente. Así consigo que la solicitud http tarde un poco es ser respondida y podamos ver el mensaje de carga durante un poco más de tiempo en la página. Finalmente, pongo de nuevo el enlace para ver este ejercicio en marcha. 
Si te ha interesado este ejemplo y quieres obtener una ayuda adicional para crear tus propios scripts en Ajax, te recomendamos ver el vídeo donde explcamos a hacer Ajax con jQuery.

jueves, 4 de septiembre de 2014

Ajax jQuery con mensaje de carga - IV

Por si sirve para aclarar las cosas, dejo a continuación el código completo de la página que hace la solicitud con jQuery:

<html>
<head>
<title>Ajax Simple</title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#cargando").css("display", "inline");
$("#destino").load("pagina-lenta.php", function(){
$("#cargando").css("display", "none");
});
});
})
</script>
</head>
<body>
Esto es un Ajax con un mensaje de cargando...
<br>
<br>
<a href="#" id="enlaceajax">Haz clic!</a>
<div id="cargando" style="display:none; color: green;">Cargando...</div>
<br>
<div id="destino"></div>
</body>
</html>

miércoles, 3 de septiembre de 2014

Ajax jQuery con mensaje de carga - III

Voy comentando línea a línea el código anterior. En la primera línea se está especificando un método ready() sobre el objeto document, que sirve para generar un código a ser ejecutado cuando la página está lista para recibir instrucciones Javascript que trabajen con el DOM. 
En la segunda línea se accede al elemento con identificador "enlaceajax" (es decir, el enlace que activará el Ajax) para definir un evento "click". En la siguiente línea se ejecuta el método preventDefault() sobre el evento producido al hacer clic sobre el enlace. Esto se hace para anular el comportamiento típico del enlace. Ahora viene la parte en la que se mostrará el mensaje de carga:

$("#cargando").css("display", "inline");


Simplemente se muestra la capa con id="cargando", con un simple cambio en el atributo CSS display de la capa. Ese cambio de atributo lo hacemos con el método css() sobre el elemento que queremos alterar, tal como se vio en el artículo Mostrar y ocultar elementos de la página con jQuery. Ahora, con la siguiente línea de código:

$("#destino").load("pagina-lenta.php", function(){

Se hace la llamada Ajax, con el método load() sobre la capa que queremos actualizar con el contenido traído por Ajax, que es la capa con id="destino". Este método recibe la URL de la página a cargar y una función callback, que se ejecutará después que el método load() se haya terminado de procesar, esto es, después de que la solicitud Ajax se haya recibido y se haya mostrado su contenido en la capa que recibe el método. 
Entonces, en esa función callback, tenemos que ocultar la capa con el mensaje de carga, puesto que cuando se ejecute esta función ya se habrá realizado todo el procesamiento Ajax. Eso lo conseguimos con el método css(), alterando la propiedad display, de manera similar a como lo habíamos realizado para mostrar la capa cargando.

$("#cargando").css("display", "none");

Esto es todo. Realmente no tiene ninguna complicación especial. Aunque, como decía, estas cosas se podrán hacer de una manera más elegante cuando aprendamos un poquito más sobre jQuery.

martes, 2 de septiembre de 2014

Ajax jQuery con mensaje de carga - II

2.- Preparando el código HTML 

Como un primer paso, vamos a mostrar el código HTML que tendremos en la página que hará la solicitud Ajax.

<a href="#" id="enlaceajax">Haz clic!</a>
<div id="cargando" style="display:none; color: green;">Cargando...</div>
<br>
<div id="destino"></div>


Como se puede ver, tenemos tres elementos: 1) el enlace, que activará la llamada a Ajax cuando se haga clic sobre él. 2) una capa con id="cargando" que es donde está el mensaje de carga (nosotros hemos colocado un texto, pero se podría colocar cualquier cosa, como el típico gif animado que muestra que se está procesando la solicitud (conviene fijarse también que esa capa cargando está oculta de momento, gracias al atributo de estilo CSS display:none). 3) la capa "destino", donde mostraremos la respuesta recibida tras la solicitud Ajax. 
3.- Llamada a Ajax con jQuery y el mensaje de carga 
En este punto vamos a describir cómo se tendría que hacer la llamada al servidor con Ajax, pero lo cierto es que este proceso ya lo explicamos con detalle anteriormente, por lo que os refiero al artículo Uso de Ajax muy sencillo con jQuery, donde encontraréis unas explicaciones que voy a dar por sabidas en este caso. Lo que explicaré en este artículo es cómo se tiene que mostrar el mensaje de carga cuando se inicia la llamada y como eliminarlo una vez hemos recibido la respuesta por Ajax. Otra cosa que el lector deberá conocer para poder entender este ejemplo es Mostrar y ocultar elementos de la página con jQuery.

$(document).ready(function(){
$("#enlaceajax").click(function(evento){
evento.preventDefault();
$("#cargando").css("display", "inline");
$("#destino").load("pagina-lenta.php", function(){
$("#cargando").css("display", "none");
});
});
})

lunes, 1 de septiembre de 2014

Ajax jQuery con mensaje de carga - I

Vemos más posibilidades de Ajax en jQuery, modificando un ejemplo anterior, para crear un mensaje de carga mientras que el usuario espera la respuesta Ajax del servidor.

Queremos ver algunas cosas típicas que podríamos desear hacer con Ajax en una página web, facilitando el proceso de desarrollo con el framework Javascript jQuery. En esta línea de artículos ya publicamos hace poco un artículo sobre el uso de Ajax en jQuery simplificado. En el mencionado artículo vimos cómo hacer una llamada Ajax con 1 sola línea de código (el Ajax en si era una línea de código, aunque se necesitan varias instrucciones más para asociar las acciones Ajax como respuesta a eventos en la página). Una de las cosas que más habitualmente podríamos desear hacer cuando se realiza una llamada Ajax es la creación de un mensaje de carga, que podemos colocar con un simple texto "cargando..." o con la típica imagen de Ajax Loader. En este artículo veremos cómo crear ese mensaje de carga al realizar una solicitud Ajax con jQuery. Para los interesados, se puede ver este ejemplo de Ajax en una página aparte.

1.- Por qué un mensaje de carga al hacer Ajax 
Cuando hacemos una solicitud por Ajax, los resultados de dicha llamada a veces tardan en llegar. Durante ese tiempo el usuario puede no ver ninguna reacción por parte del navegador, lo que le puede confundir y pensar que no ha hecho clic correctamente en el enlace o botón. Sería normal en ese caso que el usuario pulse repetidas veces un enlace o un botón de envío de formulario, generando repetidas e innecesarias llamadas al servidor, lo que puede derivar en diversos problemas. Así pues, es conveniente mostrar un mensaje de carga para advertir que su solicitud fue realizada y el proceso está en marcha y esperando respuesta del servidor. Vamos a explicar la implementación de este mensaje de carga, pero siempre teniendo en cuenta que nuestra intención en este ejemplo es mantener un código pequeño que se pueda entender fácilmente. Aunque queremos remarcar que las cosas se podrían hacer de otra manera, algo mejorada, cuando sepamos más cosas sobre el framework Javascript jQuery y pongamos en marcha algunas prácticas aconsejables de programación orientada a objetos.