24
Dejo la página web:
http://www.pixeline.be/experiments/jqUploader/
Tiene demos.
Más de lo mismo:
http://www.phpletter.com/Our-Projects/AjaxFileUpload/
http://www.arzion.com/empresa-de-internet/posts/Subiendo-archivos-con-ajax-a-traves-de-JQuery
17
Desde http://jqueryui.com/ puedes descargarte la versión completa de jQuery ( o descargarte la parte que más te interese: http://jqueryui.com/download) y además acompañarla de un Theme que la verdad estan bastante currandos ( http://jqueryui.com/themeroller/ )
En la imagen os dejo mis pruebas con el Theme “Start”
17
Antes de todo y si se quiere emepzar bien, no será de más echarle una ojeada a la documentacion de JQuery, que relativamente no es mucha: http://docs.jquery.com/Main_Page
1- ponemos un identificador (atributo id) para seleccionarlo desde jQuery.
<a href="#" id="enlaceajax">Haz clic!</a>
2- recordemos cómo asignar una función para cuando se haga clic en el enlace:
$(document).ready(function(){
$("#enlaceajax").click(function(evento){
//elimino el comportamiento por defecto del enlace
evento.preventDefault();
//Aquí pondría el código de la llamada a Ajax
});
})
3- Y ahora la parte más interesante, donde podemos ver qué tan fáciles son las cosas con este framework Javascript. Una única línea de código será suficiente:
$("#destino").load("contenido-ajax.html");
Ejemplo completo:
<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();
$("#destino").load("contenido-ajax.html");
});
})
</script>
</head>
<body><a href="#" id="enlaceajax">Haz clic!</a>
<br>
<div id="destino"></div>
</body>
</html>
Tambien es muy interesante, aparte de ver la callback de load en el ejemplo anterior, ver la $.ajax(options)
De tal forma de hacer llamadas así de facil:
$.ajax({ type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}});
Más documentación en la API de AJAX de JQuey : http://docs.jquery.com/Ajax
24
Hacer una redirección con JavaScript es muy sencillo. Podemos hacer que la redirección actúe justo al cargar la página o que actúe tras un cierto tiempo.
Redirección al cargar la página:
<body onLoad=”document.location.href=’http://www.alexmedina.net’”>
Si ponemos esto en nuestra etiqueta “body”, cuando la página cargue, redireccionará a AlexMedina.net.
Si nos interesa más una redirección que sea efectiva transcurridos unos segundos, podemos hacerlo así:
Entre <head> y </head> pondremos:
<script type=”text/javascript”>
var pagina = ‘http://www.alexmedina.net’;
var segundos = 5;function redireccion() {
document.location.href=pagina;
}
setTimeout(“redireccion()”,segundos);
</script>
Tan solo tenemos que cambiar las variables pagina y segundos, marcadas en negrita, para que redirija a la página que queramos y en el tiempo que queramos.
Lo que hacemos es crear un “timeout” que llame a la función “redireccion()” transcurridos tantos segundos como marque la variable “segundos”. La función redirección lo único que hace es redirigir a la página que se indica en la variable “pagina”.