miércoles, 11 de julio de 2012
AJAX ultra fácil y accesible (método propio) Jquery
jQuery »
AJAX ultra fácil y accesible (método propio)
Hace unos días me pregunté porqué era tan difícil implementar AJAX en un sitio cuando su principal característica es que se recargue un elemento de la página sin que se cargue toda por completo.
Me propuse hacer todo este rollo con un par de líneas de javascript, siendo el PHP el motor principal.
De esta forma y un par de horas por la noche, llegué a un método que me impresionó. La facilidad para implementarlo es demasiada: ¡3 líneas de código!.
Ahora les mostraré mi método.
1. PHP, el motor principal.
PHP se encargará de hacer las consultas en la base de datos como siempre lo has hecho: con los datos ingresados y enviados a través de un campo de formulario (elemento padre). Sus respectivos condicionamientos if y else más algún bucle determinarán los resultados en un elemento hijo.
Nota: El método GET será lo que utilizaremos para los formularios (aún no sé si se puede implementar con POST).
2. HTML, los identificadores son importantes.
Necesitamos mínimo 3 identificadores en el HMTL: un identificador "padre", un identificador "hijo" y un identificador "recargar" para actualizar el "hijo" (pues el hijo depende del padre, y si el padre cambia el hijo también).
Lo que hará nuestro script es justamente eso: actualizar el div donde se encuentra el resultado. Nada más ni nada menos.
3. Jquery
Este método funciona con jquery, y lo primero que debemos hacer es enlazar jquery en nuestro <head>.
<script type="text/javascript" src="jquery.js"></script>
Y lo que usamos de él en el script es el evento change o keyup dependiendo del caso y el famoso load().
4. ¡El script!
Y finalmente, este es el script de tres líneas. Lo podemos poner antes del </body>.
<script type="text/javascript">
$('#padre').keyup(function(){
$('#recargar').load('prueba2.php?busqueda='+$('#padre').val().replace(/ /g,"+")+' #hijo');
});
</script>
El script hace lo siguiente: recarga el elemento "recargar" del html y de paso envía a través del método GET una variable que nosotros definamos (en el ejemplo es "busqueda"). Por ello, tenemos la libertad de hacer lo que se nos dé la gana con PHP dentro del div "hijo" tomando en cuenta y condicionando siempre la variable "busqueda".
A final lo que se ve es muy sencillo. La idea es que al presionar el botón de envío obtengamos exactamente el mismo resultado que se nos muestra con javascript, y este último, se encargue de mostrarnos ese mismo ressultado antes de que presionemos el botón.
Y sin Javascript, todo funciona cool.
Ejemplos
Ejemplo 1: Combobox encadenado. El elemento hijo cambia según el elemento padre. Nota: aquí usamos el evento "change".
Ejemplo 2: Búsqueda instantánea. Cada vez que presionamos una letra los resultados de búsqueda se actualizan. En este caso mostramos sólo lo que se escribe.
Ejemplo 3: La misma búsqueda instantánea, pero implementado correctamente con la base de datos de DocumentoWeb. Prueba con la búsqueda "CSS", "PHP" o "Tutorial".
Descarga todos estos ejemplos.
Espero que les sirva y no se estresen con otros métodos que usan datos de XML, archivos javascripts dinámicos, etc. que he visto por ahi.
Actualización
Agregando otra línea fácilmente podemos poner el mensaje "Cargando..." mientras se cargan los resultados.
$('#padre').keyup(function(){
$('#recargar').html("Cargando...");
$('#recargar').load('prueba3.php?busqueda='+$('#padre').val().replace(/ /g,"+")+' #hijo');
});
Fuente: Jquery
mostrar tablas con radio o select
Codigo
<html>
<head>
//script usado para mostrar o ocutar codigo
<script type="text/javascript">
function mostrar(num) {
document.getElementById('pepe').style.display = (num==0) ? 'none' : 'block';
}
</script>
</head>
<body>
//radio boton
<p>Mostrar: <input type="radio" name="rad" onclick="mostrar(1)" />
Ocultar: <input type="radio" name="rad" checked="checked" onclick="mostrar(0)" /></p>
//Select
<select onchange="mostrar(this.value)">
<option value=1>Mostrar</option>
<option value=0>Ocultar</option>
</select>
//tabla a mostrar
<table id="pepe" style="display:none">
<tr><td>Algo</td></tr>
</table>
</body>
</html>
fuente:foros del web
Ejemplo
//metodo por radios
Mostrar: Ocultar:
// metodo por select
//datos de la tabla
martes, 26 de junio de 2012
Código AJAX para actualizar div e id.
A continuación les dejo un código para actualizar por meio de AJAX, los div e id de nuestras aplicaciones web sin la necesidad de cargar toda la paginá y así evitar lentitud, además de sobrcargarla. El siguiente códico lo podemos copiar entre las etiquetas <head> </head> ó podemos guardarlo en un archivo javascript con extensión ".js".
1 | <script type="text/javascript" language="javascript"> |
2 | function refreshDivs(divid,secs,url) |
3 | { |
4 |
5 | // define our vars |
6 | var divid,secs,url,fetch_unix_timestamp; |
7 |
8 | // Chequeamos que las variables no esten vacias.. |
9 | if(divid == ""){ alert('Error: escribe el id del div que quieres refrescar'); return;} |
10 | else if(!document.getElementById(divid)){ alert('Error: el Div ID selectionado no esta definido: '+divid); return;} |
11 | else if(secs == ""){ alert('Error: indica la cantidad de segundos que quieres que el div se refresque'); return;} |
12 | else if(url == ""){ alert('Error: la URL del documento que quieres cargar en el div no puede estar vacia.'); return;} |
13 |
14 | // The XMLHttpRequest object |
15 |
16 | var xmlHttp; |
17 | try{ |
18 | xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari |
19 | } |
20 | catch (e){ |
21 | try{ |
22 | xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer |
23 | } |
24 | catch (e){ |
25 | try{ |
26 | xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); |
27 | } |
28 | catch (e){ |
29 | alert("Tu explorador no soporta AJAX."); |
30 | return false; |
31 | } |
32 | } |
33 | } |
34 |
35 | // Timestamp para evitar que se cachee el array GET |
36 |
37 | fetch_unix_timestamp = function() |
38 | { |
39 | return parseInt(new Date().getTime().toString().substring(0, 10)) |
40 | } |
41 |
42 | var timestamp = fetch_unix_timestamp(); |
43 | var nocacheurl = url+"?t="+timestamp; |
44 |
45 | // the ajax call |
46 | xmlHttp.onreadystatechange=function(){ |
47 | if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ |
48 | document.getElementById(divid).innerHTML=xmlHttp.responseText; |
49 | setTimeout(function(){refreshDivs(divid,secs,url);},secs*1000); |
50 | } |
51 | } |
52 | xmlHttp.open("GET",nocacheurl,true); |
53 | xmlHttp.send(null); |
54 | } |
55 |
56 | // LLamamos las funciones con los repectivos parametros de los DIVs que queremos refrescar. |
57 | window.onload = function startrefresh(){ |
58 | refreshDivs('div1',5,'div1.php'); |
59 | refreshDivs('div2',3,'div2.php'); |
60 | refreshDivs('div3',10,'div3.php'); |
61 | } |
62 | </script> |
La parte del código donde indicamos que divs hay que refrescar es la siguiente:
1 | window.onload = function startrefresh(){ |
2 | refreshDivs('div1',5,'div1.php'); |
3 | refreshDivs('div2',3,'div2.php'); |
4 | refreshDivs('div3',10,'div3.php'); |
5 | } |