Sesion 6

Curso de JQuery
SESION 6
1 - Ajax: métodos ajaxStart y ajaxStop
Estos dos métodos se pueden asociar a un objeto de tipo jQuery, tienen como
parámetro una función:
ajaxStart([función])
La función de ajaxStart se dispara cuando se inicia la petición al servidor y nos

puede servir para mostrar en pantalla al usuario que están llegando datos del
servidor.
ajaxStop([función])
Se dispara esta función cuando finalizar la petición de datos al servidor.
Problema:Confeccionar un problema que muestre una lista de hipervínculos con

los distintos signos del horóscopo y luego al ser presionado no recargue la página
completa sino que se envíe una petición al servidor y el mismo retorne la
información de dicho signo, luego se actualice solo el contenido de un div del
archivo HTML.
Mostrar un gif animado mientras los datos no llegaron del servidor.
pagina1.html
<html>
<head>
<title>Problema</title>
<link rel="StyleSheet" href="estilos.css" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="funciones.js"></script>
</head>
<body>
<h1>Signos del horóscopo.</h1>
<div id="menu">
<p><a id="enlace1" href="pagina1.php?cod=1">Aries</a></p>
<p><a id="enlace2" href="pagina1.php?cod=2">Tauro</a></p>
<p><a id="enlace3" href="pagina1.php?cod=3">Geminis</a></p>
<p><a id="enlace4" href="pagina1.php?cod=4">Cancer</a></p>
<p><a id="enlace5" href="pagina1.php?cod=5">Leo</a></p>
<p><a id="enlace6" href="pagina1.php?cod=6">Virgo</a></p>
<p><a id="enlace7" href="pagina1.php?cod=7">Libra</a></p>
<p><a id="enlace8" href="pagina1.php?cod=8">Escorpio</a></p>
1
Curso de JQuery
<p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p>

<p><a id="enlace10"
href="pagina1.php?cod=10">Capricornio</a></p>
<p><a id="enlace11" href="pagina1.php?cod=11">Acuario</a></p>
<p><a id="enlace12" href="pagina1.php?cod=12">Piscis</a></p>
</div>
<div id="detalles">Seleccione su signo.</div>
</body>
</html>
funciones.js
var x;
x=$(document);
x.ready(inicializarEventos);
function inicializarEventos()
{
var x;
x=$("#menu a");
x.click(presionEnlace);
}
function presionEnlace()
{
var pagina=$(this).attr("href");
var x=$("#detalles");
x.ajaxStart(inicioEnvio);
x.load(pagina);
return false;
}
function inicioEnvio()
{
x.html('<img src="../cargando.gif">');
}
pagina1.php
<?php
header('Content-Type: text/html; charset=ISO-8859-1');
if ($_REQUEST['cod']==1)
echo "<strong>Aries:</strong> Hoy los cambios serán
físicos,
personales, de carácter, Te sentirás impulsivo y tomarás
iniciativas. Período en donde considerarás unirte a
agrupaciones
de beneficencia, o de ayuda a los demás.";
2
Curso de JQuery
echo "<strong>Tauro:</strong> Hoy los cambios serán
privados,
íntimos. Recuerdos. Ayuda, solidaridad. Asuntos en lugares
de retiro. Tu
cónyuge puede aportar buen status a tu vida o apoyo a tu
profesión.";
echo "<strong>Géminis:</strong> Los asuntos de hoy tienen
que ver con las amistades, reuniones, actividades con
ellos. Día esperanzado,
ilusiones. Mucha energía sexual y fuerza emocional. Deseos
difíciles
de controlar.";
echo "<strong>Cancer:</strong> Este día la profesión
y las relaciones con superiores y con tu madre serán de
importancia. Actividad
en relación a estos temas. Momentos positivos con
compañeros de
trabajo. Actividad laboral agradable.";
echo "<strong>Leo:</strong> Este día los estudios, los
viajes, el extranjero y la espiritualidad serán lo
importante. Pensamientos,
religión y filosofía también. Vivencias kármicas de
la época te vuelven responsable tomando decisiones.";
echo "<strong>Virgo:</strong> Para este día toma
importancia
tu vida sexual, tal vez miedos, temas legales, juicios o
herencias. Experiencias
extrañas. Hay karma de prueba durante este período en tu
parte psicológica,
generándose algunos replanteos.";
echo "<strong>Libra:</strong> Hoy todo asunto tiene que ver
con
tu pareja, también con socios, con la gente o el público.
Ellos
serán lo más importante del día. Ganancias a través
de especulaciones o del juego. Actividades vocacionales
artísticas.";
echo "<strong>Escorpio:</strong> Hoy todo asunto tiene que
ver
con temas de trabajo y de salud. Presta atención a ambos.
Experiencias
3
Curso de JQuery
diversas con compañeros. Durante este período tendrás

muchos
recursos para ganar dinero.";
echo "<strong>Sagitario:</strong> Durante este día se
vivirán cambios en relación a los noviazgos o a los hijos.
Creatividad,
actividad, diversiones y salidas. Período de encuentros con
personas o
situaciones que te impresionan.";
echo "<strong>Capricornio:</strong> Los cambios del día
tienen que ver con tu hogar, con la convivencia y con el
padre. Asuntos relativos
al carácter en la convivencia. El karma de responsabilidad
de estos momentos
te acercará al mundo de lo desconocido, mucha madurez y
contacto con el
más allá.";
echo "<strong>Acuario:</strong> Hoy todo asunto tiene que
ver
con el entorno inmediato, hermanos y vecinos, con la
comunicación, los
viajes cortos o traslados frecuentes. El hablar y
trasladarse será importante
hoy. Mentalidad e ideas activas.";
echo "<strong>Piscis:</strong> Durante este día se vivirán
cambios en la economía, movimientos en los ingresos,
negocios, valores.
Momentos de gran fuerza y decisión profesionales, buscarás
el liderazgo.";
sleep(1);
?>
estilos.css
#menu {
font-family: Arial;
margin:5px;
}
#menu p {
margin:0px;
padding:0px;
}
#menu a {
4
Curso de JQuery
display: block;
padding: 3px;
width: 160px;
background-color: #f7f8e8;
border-bottom: 1px solid #eee;
text-align:center;
}
#menu a:link, #menu a:visited {

color: #f00;
text-decoration: none;
}
#menu a:hover {
background-color: #369;
color: #fff;
}
#detalles {
background-color:#ffc;
text-align:left;
font-family:verdana;
border-width:0;
padding:5px;
border: 1px dotted #fa0;
margin:5px;
}
Lo nuevo en este problema es que llamamos al método ajaxStart con el mismo

objeto jQuery que llama al método load:
function presionEnlace()
{
var pagina=$(this).attr("href");
x.ajaxStart(inicioEnvio);
x.load(pagina);
return false;
}
Luego cuando se activa la petición de la página al servidor el objeto jQuery llama a

la función inicioEvento, donde mostramos el gif animado:
{
}
5
Curso de JQuery
No ocultamos el gif animado ya que se está mostrando en el div #detalles. Dicho

div será inicializado por el objeto jQuery con los datos enviados por el servidor y
borrará el elemento img.
2 - $.get y $.post(Pasando datos al servidor por los métodos GET y POST)
Utilizamos estas funciones cuando no queremos inyectar directamente los datos a

nuestra página, sino que queremos procesarlos y eventualmente agregarlos en
distintas partes.
La sintaxis de la función $.get es distinta a la ya utilizada $, en este caso es una

función global de la librería jQuery:
$.get([nombre de la página],[parámetros a enviarse por el

método get],
[función que recibe los datos del servidor])
También podemos llamarla:
jQuery.get([nombre de la página],[parámetros a enviarse por
el método get],
[función que recibe los datos del servidor])
La función $.post es idéntica a la función $.get, lo único que difiere es como el

protocolo HTTP empaqueta los datos y los envía al servidor. Normalmente se
utiliza la función $.post, ya que no está limitado la cantidad de datos que se
pueden enviar al servidor.
Problema:Implementar una aplicación que calcule el cuadrado de un número que

ingresamos por teclado. La operación se realiza en el servidor, le enviamos los
datos mediante la función de jQuery $.get
pagina1.html
<html>
<head>
</head>
<body>
<form action="pagina1.php" method="post" id="formulario">
Ingrese nro:<input type="text" name="nro" id="nro"
size="10"><br>
<input type="submit" value="Calcular el cuadrado"
id="enviar">
<div id="resultados"></div>
</form>
</body>
6
Curso de JQuery
</html>
funciones.js
var x;
x=$(document);
{
var x;
x=$("#enviar");
x.click(presionSubmit);
}
function presionSubmit()
{
var v=$("#nro").attr("value");
$.get("pagina1.php",{numero:v},llegadaDatos);
return false;
}
function llegadaDatos(datos)
{
alert(datos);
}
pagina1.php
<?php
$cuadrado=$_REQUEST['numero']*$_REQUEST['numero'];
echo $cuadrado;
?>
Veamos el código JavaScript para comunicarse con el servidor:

Primero en la función inicializarEventos enlazamos el evento click al botón submit
del formulario:
{
var x;
x=$("#enviar");
}
Cuando presionamos el botón extraemos el valor del control text y llamamos a la

función $.get indicando el nombre de la página a llamar, un objeto literal con todos
los parámetros y sus valores (en este caso solo tenemos un parámetro llamado
7
Curso de JQuery
numero) y finalmente el nombre de la función que se ejecutará cuando lleguen los

datos del servidor:
{
$.get("pagina1.php",{numero:v},llegadaDatos);
return false;
}
La función que se ejecuta cuando llegan los datos del servidor recibe un string:
{
alert(datos);
}
3 - $.getJSON
La función getJSON hace una petición de datos al servidor considerando que

retorna la información con notación JSON. La sintaxis de esta función es:
$.getJSON([nombre de la página], [parámetros], [función que

recibe los datos])
La función getJSON procede a generar un objeto en JavaScript y nosotros en la

función lo procesamos.
Problema:Confeccionar un sitio que permita ingresar el documento de una

persona y nos retorne su apellido, nombre y lugar donde debe votar.
pagina1.html
<html>
<head>
</head>
<body>
Ingrese dni (solo existen los valores 1,2 y 3):<input
type="text"
name="dni" id="dni" size="10"><br>
<input type="button" value="Enviar" id="boton1">
</body>
</html>
8
Curso de JQuery
funciones.js
var x;
x=$(document);
{
var x;
x=$("#boton1");
}
{
var v=$("#dni").attr("value");
$.getJSON("pagina1.php",{dni:v},llegadaDatos);
return false;
}
{
$("#resultados").html("Nombre:"+datos.nombre+
"<br>"+"Apellido:"+
datos.apellido+"<br>"+
"Direccion:"+datos.direccion);
}
pagina1.php
<?php
header('Content-Type: text/txt; charset=ISO-8859-1');
$nombre='';
$apellido='';
$direccion='';
if ($_REQUEST['dni']=='1')
{
$nombre='Juan';
$apellido='Rodriguez';
$direccion='Colon 123';
}
{
$nombre='Ana';
$apellido='Maldonado';
$direccion='Lima 245';
}
{
$nombre='laura';
9
Curso de JQuery
$apellido='Pueyrredon';
$direccion='Laprida 785';
}
echo "{
'nombre':'$nombre',
'apellido':'$apellido',
'direccion':'$direccion'
}";
?>
Cuando se presiona el botón submit procedemos a realizar la petición asincrónica

utilizando la función getJSON:
{
var v=$("#dni").attr("value");
$.getJSON("pagina1.php",{dni:v},llegadaDatos);
return false;
}
Como hemos llamado a la función getJSON la misma nos retorna un objeto

JavaScript para procesarlo:
{
$("#resultados").html("Nombre:"+datos.nombre+
"<br>"+"Apellido:"+
datos.apellido+"<br>"+
"Direccion:"+datos.direccion);
}
Tengamos en cuenta que el programa en el servidor debe retornar un archivo con

notación JSON:
<?php
header('Content-Type: text/txt; charset=ISO-8859-1');
$nombre='';
$apellido='';
$direccion='';
{
$nombre='Juan';
$apellido='Rodriguez';
$direccion='Colon 123';
}
{
$nombre='Ana';
10
Curso de JQuery
$apellido='Maldonado';
$direccion='Lima 245';
}
{
$nombre='laura';
$apellido='Pueyrredon';
$direccion='Laprida 785';
}
echo "{
'nombre':'$nombre',
'apellido':'$apellido',
'direccion':'$direccion'
}";
?>
4 - $.ajax
Hasta ahora hemos visto que jQuery nos provee varias formas de recuperar y
enviar datos al servidor utilizando ajax:
1. Método load
2. Funciones $.get y $.post
3. $.getJSON
Existe otra función llamada $.ajax que es la más completa de todas, pero como
desventaja es más compleja su empleo.
La sintaxis de la función $.ajax es:

ajax([objeto literal])
Retorna un objeto XMLHttpRequest que podemos eventualmente utilizarlo.

Con un ejemplo veremos las propiedades principales que podemos configurar en el
parámetro a enviar.
Problema:Implementar una aplicación que calcule el cuadrado de un número que

ingresamos por teclado. La operación se realiza en el servidor, le enviamos los
datos mediante la función de jQuery $.ajax
pagina1.html
<html>
<head>
</head>
<body>
11
Curso de JQuery
<form action="pagina1.php" method="post" id="formulario">

Ingrese nro:<input type="text" name="nro" id="nro"
size="10"><br>
<input type="submit" value="Calcular el cuadrado"
id="enviar">
</form>
</body>
</html>
funciones.js
var x;
x=$(document);
{
var x;
x=$("#enviar");
}
{
$.ajax({
async:true,
type: "POST",
dataType: "html",
contentType: "application/x-www-form-urlencoded",
url:"pagina1.php",
data:"numero="+v,
beforeSend:inicioEnvio,
success:llegadaDatos,
timeout:4000,
error:problemas
});
return false;
}
{
var x=$("#resultados");
}
{
12
Curso de JQuery
$("#resultados").text(datos);
}
function problemas()
{
$("#resultados").text('Problemas en el servidor.');
}
pagina1.php
<?php
$cuadrado=$_REQUEST['numero']*$_REQUEST['numero'];
echo $cuadrado;
?>
Veamos que datos podemos enviarle a la función $.ajax:
{
$.ajax({
async:true,
type: "POST",
dataType: "html",
contentType: "application/x-www-form-urlencoded",
url:"pagina1.php",
data:"numero="+v,
beforeSend:inicioEnvio,
success:llegadaDatos,
timeout:4000,
error:problemas
});
return false;
}
Hemos inicializado las siguientes propiedades:

 async : Indica si la comunicación será asincrónica (true) o sincrónica (false)
 type : Indica el método que se envían los datos (pudiendo ser GET o POST)
 dataType : Indica el tipo de datos que se va a recuperar (pudiendo ser
"html","xml","json","script")
 contentType : Indicamos como se empaquetan los datos para enviarlos al
servidor (normalmente "application/x-www-form-urlencoded")
 url : Indicamos el nombre de la página que procesará la petición de datos.
 data : Indicamos los datos a enviar al servidor.
 beforeSend : Indicamos el nombre de la función que se ejecutará previo al
envío de datos (en nuestro ejemplo mostramos el gif animado que indica que
se inició el pedido de datos al servidor)
13
Curso de JQuery
 success : Indicamos la función que se ejecuta cuando finalizó el envío de

datos del servidor y además ocurrió todo en forma correcta (en nuestro
ejemplo recuperamos el dato devuelto y lo mostramos en la página)
 timeout : El tiempo máximo a esperar por la petición de datos.
 error : El nombre de la función que se ejecuta si los datos no llegan del
servidor.
10 - Funciones anónimas en nuestro código.
Si visitamos sitios sobre jQuery podremos comprobar que la sintaxis empleada es

mucho más compacta que todos los ejemplos que venimos viendo. El objetivo de
este tutorial es aprender jQuery de una forma sencilla, pero estaría inconcluso si
no introducimos la forma más habitual de programar con jQuery (funciones
anónimas y encadenamiento de llamadas con el objeto jQuery)
Veamos como se organiza nuestro código utilizando funciones anónimas.
Problema:Confeccionar una página que muestre dos títulos de primer nivel, al ser
presionados cambiar el color de fuente, fondo y la fuente del texto.
pagina1.html
<html>
<head>
</head>
<body>
<h1 id="titulo1">Primer título</h1>
<h1 id="titulo2">Segundo título</h1>
</body>
</html>
funciones.js
var x;
x=$(document);
x.ready(function(){
var x;
x=$("#titulo1");
x.click(function() {
var x;
x=$("#titulo1");
x.css("color","#ff0000");
x.css("background-color","#ffff00");
x.css("font-family","Courier");
});
x=$("#titulo2");
14
Curso de JQuery
x.click(function () {
var x;
x=$("#titulo2");
x.css("color","#ffff00");
x.css("background-color","#ff0000");
x.css("font-family","Arial");
});
})
Como podemos observar el código a quedado mucho más compacto.

Normalmente uno utiliza funciones anónimos cuando el algoritmo contenido en la
función solo se requiere para dicho evento.
La sintaxis para definir una función anónima:

x.ready(function(){
......
})
Como vemos llamamos al método ready y entre paréntesis incluimos la función tal
como las venimos implementando en conceptos anteriores pero sin nombre.
También es interesante ver que podemos disponer otras funciones anónimos
dentro de una función anónima:
x.click(function () {
......
});
6 - Llamadas encadenadas de métodos del objeto jQuery.
Otra característica muy utilizada en la librería jQuery es la llamada sucesiva de

métodos, esto se puede hacer ya que casi todos los métodos de la clase jQuery
retornan un objeto de tipo jQuery.
Para entender esta sintaxis implementaremos un problema.
Problema:Confeccionar una página que muestre un recuadro con texto. Disponer

dos botones, uno que cambie la opacidad lentamente hasta el valor 0.5,
seguidamente oculte el recuadro también lentamente, y el otro botón que lo
muestre en forma instantánea y aumente su opacidad al 100%.
pagina1.html
<html>
<head>
15
Curso de JQuery
</head>
<body>
<input type="button" id="boton1" value="Reducir opacidad
y ocultar">
<input type="button" id="boton2" value="Mostrar en
forma instantánea">
<div id="descripcion" class="recuadro">
<p>HTML es el lenguaje que se emplea para el desarrollo de
páginas de internet.</p>
<p>Este lenguaje está constituido de elementos que el
navegador interpreta
y las despliega en la pantalla de acuerdo a su objetivo.
Veremos que hay elementos
para disponer imágenes sobre una página, hipervínculos que
nos permiten dirigirnos a otra página, listas, tablas para
tabular datos,
etc.</b><p>Para poder crear una página HTML se requiere un
simple editor
de texto (en nuestro caso emplearemos este sitio) y un
navegador de internet (IExplorer,
FireFox etc.), emplearemos el navegador que en este preciso
momento está
utilizando (recuerde que usted está viendo en este preciso
momento una
página HTML con su navegador).</p>
<p>Lo más importante es que en cada concepto desarrolle los
ejercicios
propuestos y modifique los que se presentan ya resueltos.<p>
<p>Este curso lo que busca es acercar el lenguaje HTML a una
persona que
nunca antes trabajó con el mismo. No pretende mostrar todas
los elementos
HTML en forma alfabética.</p>
<p>Como veremos, de cada concepto se presenta una parte
teórica,
en la que se da una explicación completa, luego se pasa a la
sección
del ejercicio resuelto donde podemos ver el contenido de la
página HTML
y cómo la visualiza el navegador. Por último y tal vez la
sección
más importante de este tutorial es donde se propone que usted
haga páginas
en forma autónoma (donde realmente podrá darse cuenta si el
concepto
quedó firme).</p>
</div>
</body>
16
Curso de JQuery
</html>
funciones.js
$(document).ready(function () {
$("#boton1").click(function () {
$("#descripcion").fadeTo("slow",0.5).hide("slow");
});
$("#descripcion").show().fadeTo("slow",1);
})
})
estilos.css
.recuadro {
background-color:#ffffcc;
font-size:14px;
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:dotted;
border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
Como podemos observar en la siguiente línea tenemos llamadas encadenadas:

estilos.css
.recuadro {
background-color:#ffffcc;
font-size:14px;
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;
border-top-style:dotted;
17
Curso de JQuery
border-right-style:solid;
border-bottom-style:solid;
border-left-style:dotted;
border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
Primero obtenemos la referencia del id descripcion, la función $ nos retorna un

objeto jQuery que utilizamos directamente para llamar al método fadeTo para
aumentar su opacidad lentamente. Seguidamente el método fadeTo nos retorna la
referencia del objeto jQuery y la utilizamos para llamar al método hide indicándole
que oculte el div lentamente.
Es importante notar que los métodos se ejecutan de izquierda a derecha.
Recordemos como era nuestro código cuando comenzamos a estudiar jQuery:

var x;
x=$(document);
{
var x=$("#boton1");
x.click(ocultarRecuadro);
x=$("#boton2");
x.click(mostrarRecuadro);
}
function ocultarRecuadro()
{
var x=$("#descripcion");
x.fadeTo("slow",0.5);
x.hide("slow");
}
function mostrarRecuadro()
{
var x=$("#descripcion");
x.show();
x.fadeTo("slow",1);
}
Con funciones anónimas y encadenamiento de llamadas a métodos:

18
Curso de JQuery
});
$("#descripcion").show().fadeTo("slow",1);
})
})
Luego de haber estudiado jQuery con la metodología larga no debería ser muy
difícil adaptarse a esta metodología resumida.
7 - Mostrar un tooltip con datos recuperados del servidor en forma

asincrónica
Implementaremos un problema utilizando todos los conceptos aprendidos hasta

ahora.
Problema: Implementar un Tooltip con jQuery recuperando la información a

mostrar del servidor en forma asincrónica.
Agregar una imagen al tooltip. En el servidor ya hay cuatro imágenes llamadas

imagen1.jpg, imagen2.jpg etc. y se encuentran en el directorio inmediatamente
superior a donde se almacenan las páginas. ( <img src="../imagen1.jpg"> )
pagina1.html
<html>
<head>
</head>
<body>
<p>Entre con el mouse al recuadro.</p>
<div class="cuadradito" id="c1"></div>
</body>
</html>
estilos.css
.cuadradito{
background-color: #f00;
height: 50px;
width: 50px;
margin:3px;
19
Curso de JQuery
z-index: -1;
}
#divmensaje {
background-color: yellow;
position: absolute;
padding: 5px;
width:250px;
left:120px;
top:100px;
z-index: 100;
}
funciones.js
$("body").append('<div id="divmensaje">hhhh</div>');
$("#divmensaje").hide();
$(".cuadradito").hover(function (e) {
$("#divmensaje").show();
$("#divmensaje").css("left",e.clientX+document.body.scrollLef
t+5);
$("#divmensaje").css("top",e.clientY+document.body.scrollTop+
5);
$("#divmensaje").load("pagina1.php?cod="+$(this).attr('id'));
},
function () {
})
$(".cuadradito").mousemove(function (e){
t+5);
5);
})
})
pagina1.php
<?php
if ($_REQUEST['cod']=='c1')
{
echo "<img src=\"../imagen1.jpg\">";
echo "<p>Primer tooltip.</p>";
20
Curso de JQuery
echo "<p>aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa

aaaaaaaaaa";
echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaa
aaaaaaaaaaaaaaaa";
echo "aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa
aaaaaaa";
echo "aaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa
aaaaaaaaaa";
echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaa
aaaaaaaaaaaaaaaa</p>";
}
{
echo "<p>Segundo tooltip.</p>";
echo "<p>bbbbbbbb bbbbbbbbbbb bbbbbbbb bbbbbbbbbbbbbb
bbbbbbbbbbb bb";
echo "bbbbbbbb bbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbb
bbbbbbbbbbb bbb</p>";
}
{
echo "<p>Tercer tooltip.</p>";
}
{
echo "<p>Cuarto tooltip.</p>";
}
?>
Como podemos ver el código JavaScript utilizando la librería jQuery queda muy
compacto y reducido:
$("body").append('<div id="divmensaje">hhhh</div>');
$(".cuadradito").hover(function (e) {
$("#divmensaje").show();
t+5);
5);
21
Curso de JQuery
$("#divmensaje").load("pagina1.php?cod="+$(this).attr('id'));
},
function () {
})
$(".cuadradito").mousemove(function (e){
t+5);
5);
})
})
22

Sesion 6

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Sesion 6

Caricato da

Copyright:

Formati disponibili

Curso de JQuery

1 - Ajax: métodos ajaxStart y ajaxStop

La función de ajaxStart se dispara cuando se inicia la petición al servidor y nos

Se dispara esta función cuando finalizar la petición de datos al servidor.

Problema:Confeccionar un problema que muestre una lista de hipervínculos con

Mostrar un gif animado mientras los datos no llegaron del servidor.

<p><a id="enlace9" href="pagina1.php?cod=9">Sagitario</a></p>

diversas con compañeros. Durante este período tendrás

#menu a:link, #menu a:visited {

Lo nuevo en este problema es que llamamos al método ajaxStart con el mismo

Luego cuando se activa la petición de la página al servidor el objeto jQuery llama a

No ocultamos el gif animado ya que se está mostrando en el div #detalles. Dicho

2 - $.get y $.post(Pasando datos al servidor por los métodos GET y POST)

Utilizamos estas funciones cuando no queremos inyectar directamente los datos a

La sintaxis de la función $.get es distinta a la ya utilizada $, en este caso es una

$.get([nombre de la página],[parámetros a enviarse por el

La función $.post es idéntica a la función $.get, lo único que difiere es como el

Problema:Implementar una aplicación que calcule el cuadrado de un número que

Veamos el código JavaScript para comunicarse con el servidor:

Cuando presionamos el botón extraemos el valor del control text y llamamos a la

numero) y finalmente el nombre de la función que se ejecutará cuando lleguen los

La función getJSON hace una petición de datos al servidor considerando que

$.getJSON([nombre de la página], [parámetros], [función que

La función getJSON procede a generar un objeto en JavaScript y nosotros en la

Problema:Confeccionar un sitio que permita ingresar el documento de una

Cuando se presiona el botón submit procedemos a realizar la petición asincrónica

Como hemos llamado a la función getJSON la misma nos retorna un objeto

Tengamos en cuenta que el programa en el servidor debe retornar un archivo con

La sintaxis de la función $.ajax es:

Retorna un objeto XMLHttpRequest que podemos eventualmente utilizarlo.

Problema:Implementar una aplicación que calcule el cuadrado de un número que

<form action="pagina1.php" method="post" id="formulario">

Veamos que datos podemos enviarle a la función $.ajax:

Hemos inicializado las siguientes propiedades:

 success : Indicamos la función que se ejecuta cuando finalizó el envío de

10 - Funciones anónimas en nuestro código.

Si visitamos sitios sobre jQuery podremos comprobar que la sintaxis empleada es

Veamos como se organiza nuestro código utilizando funciones anónimas.

Como podemos observar el código a quedado mucho más compacto.

La sintaxis para definir una función anónima:

6 - Llamadas encadenadas de métodos del objeto jQuery.

Otra característica muy utilizada en la librería jQuery es la llamada sucesiva de

Para entender esta sintaxis implementaremos un problema.

Problema:Confeccionar una página que muestre un recuadro con texto. Disponer

Como podemos observar en la siguiente línea tenemos llamadas encadenadas:

Primero obtenemos la referencia del id descripcion, la función $ nos retorna un

Es importante notar que los métodos se ejecutan de izquierda a derecha.

Recordemos como era nuestro código cuando comenzamos a estudiar jQuery:

Con funciones anónimas y encadenamiento de llamadas a métodos:

7 - Mostrar un tooltip con datos recuperados del servidor en forma

Implementaremos un problema utilizando todos los conceptos aprendidos hasta

Problema: Implementar un Tooltip con jQuery recuperando la información a

Agregar una imagen al tooltip. En el servidor ya hay cuatro imágenes llamadas

echo "<p>aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa

Potrebbero piacerti anche