Tag Archive for: jquery

17Sep 2010 1 Comment

Jquery: Búsqueda Instantanea parte 2

Categories: AJAX, javascript - Tags: , , ,

Como prometí aqui va la segunda parte del tutorial para búsqueda instantanea, voy a mostrar como adaptarlo a 2 páginas web distintas en el primer caso una forma simple usando la web de NeoTeo y para el segundo caso voy a hacer un Flickr Instant usando su respuesta JSON.

NeoTeo

En este caso no existe una respuesta JSON que podamos parsear y mostrar así que usaré un iframe con id “miframe” que transmita mi búsqueda y la muestre. Para ello voy a usar una sola función llamada “getTopSearchResult” la que a su vez invoca la función doneWorking que básicamente nos indica que la búsqueda fue exitosa, ya hablaré de esta más adelante.

1
2
3
4
5
function getTopSearchResult(keyword) {  
    var the_url = 'http://www.neoteo.com/tag/'+keyword+'.neo';
    doneWorking();
    $("#miframe").attr('src', the_url);
}

Flickr Instant

Flickr al igual que la gran mayoría de portales web 2.0 si ofrece resultados en formato Json, asi que voy a provecharme de esta característica para buscar resultados y luego poder mostrarlos correctamente ordenados.

Primero voy a buscar resultados con esta función:

1
2
3
4
5
function getTopSearchResult(keyword) {
     var the_url = 'http://api.flickr.com/services/feeds/photos_public.gne?tags='+encodeURIComponent(keyword)+'&format=json&jsoncallback=?';
    $.getJSON(the_url, displayImages);
    doneWorking();
}

Ahora el problema es convertir ese resultado json en algo más coherente y util para el usuario, lo que logro con la función “displayImages”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function displayImages(data) {                                                                                                                                  // inicia la busqueda
        ////var iStart = Math.floor(Math.random()*(11));           
        // Empezamos
        var htmlString = "<ul>";                   
       
        // Mostramos resultados
        $.each(data.items, function(i,item){   
                // Decimos que muestre thumbnails cuadrados
                var sourceSquare = (item.media.m).replace("_m.jpg", "_s.jpg");     
               
                // Empezamos a mostrar uno por uno
                htmlString += '<li><a href="' + item.link + '" target="_blank">';
                htmlString += '<img src="' + sourceSquare + '" alt="' + item.title + '" title="' + item.title + '" border="0" />';
                htmlString += '</a></li>';
        });    
       
    // Finalmente llenamos el DIV
    $('#imagesWrapper').html(htmlString + "</ul>");
}

Este método es válido para cualquier resultado json de donde sea que provengam basta alterar los nombres de las variables que no siempre son link, title, etc

Ver Demo
Download

16Sep 2010 2 Comments

Jquery: Búsqueda Instantanea parte 1

Categories: Otros - Tags: ,

Últimamente se han puesto de moda las búsquedas instantaneas usando AJAX como el aún en prueba Google Instant o el script experimental para hacer un YouTube Instant, en realidad implementar soluciones así no es nada del otro mundo el verdadero problema radica en que generan un mayor tráfico y pueden sobrecargar el servidor si tienen demasiados usuarios.

En este tutorial de dos partes voy a destripar el codigo de youtube instant, simplificarlo un poco y mostrar como hacer los cambios para que funcione con cualquier sitio web 2.0 (entendiendo que esos son los sitios que cuentan con un API para acceder a su contenido externamente ya sea enformato XML o Json), este script podría funcionar con YouTube, Flickr, Google, Google Images, etc…

Sugerencias de Google

Como no cuento con una base de datos que contenga los términos más buscados y que además me corrija la ortografía y ofrezca posibles búsquedas, voy a hacer que Google se encargue de esa chamba y de eso trata la primera parte del tutorial.

Estructura del buscador

Básicamente sólo necesitamos un campo input, un span que nos indica la palabra clave que estamos buscando y un div que vaya a contener los resultados

1
2
3
4
5
6
7
<div id="header" class="clearfix">
    <input id="searchBox" value="" class="statusPlaying"></input>
    <span id="searchTermKeyword"><strong>Búsqueda Instantanea</strong></span>
</div>
<div id="resultadoDiv">
                Resultados de la Búsqueda
</div>

Instant.js

Ahora necesito incluir jquery y este archivo instant.js que es el encargado de pedirle a google sugerencias para los términos de búsqueda y en la 2da parte además deberá conectarse con un API y darnos resultados.

Bueno veamoslo por partes:

Lo primero es crear las variables que nos indiquen el estado de la búsqueda y además asignen los eventos cuando escribo y cuando dejo de escribir

1
2
3
4
5
6
7
8
9
10
11
12
function iniciar() {
    // Inicializa variables y eventos
    currentSearch = '';
    currentSuggestion = '';
    xhrWorking = false; // Indica si la consulta XHR se esta ejecutando
    searchPending = false; // Indica si hay otra busqueda
    var searchBox = $('#searchBox');
    searchBox.keyup(doInstantSearch);
    searchBox.submit(doInstantSearch);
    // Focus search box
    searchBox.focus();
}

De esta forma cuando escribo un término ejecuta la funcion doInstantSearch que primero comprueba si hay cosas que buscar, luego borra la busqueda pasada y finalmente mediante AJAX le pide a Google que le envie palabras clave

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function doInstantSearch() {
    if (xhrWorking) {
        searchPending = true;
        return;
    }
    var searchBox = $('#searchBox');
    // No repite la busqueda a menos que cambie la busqueda
    if (searchBox.val() == currentSearch) {
        return;
    }
    currentSearch = searchBox.val();

    // Borra los resultados de la busqueda pasada
    if (searchBox.val() == '') {
        $('#moreVideosWrapper').hide('slow');
        currentSuggestion = '';
        updateSuggestedKeyword('<strong>Busqueda Instantanea</strong>');
        return; // don't search for anything
    }

    // Empieza la busqueda
    searchBox.attr('class', 'statusLoading');
    keyword = searchBox.val();
    // Usa el sistema de sugerencias de google
    var the_url = 'http://suggestqueries.google.com/complete/search?hl=es&hjson=t&jsonp=window.xt.handleResponse&q='+encodeURIComponent(searchBox.val())+'&cp=1';
     /*
     Este otro es para sugerencias con youtube
    var the_url = 'http://suggestqueries.google.com/complete/search?hl=es&ds=yt&client=youtube&hjson=t&jsonp=window.yt.www.suggest.handleResponse&q='+encodeURIComponent(searchBox.val())+'&cp=1';
    */
    $.ajax({
       type: "GET",
       url: the_url,
       dataType: "script"
     });
    xhrWorking = true;
}

A su vez esta función va a invocar a otra, fijémonos en la linea var the_url = ‘http://suggestqueries.google.com/complete/search?hl=es&hjson=t&jsonp=window.xt.handleResponse&q=’+encodeURIComponent(searchBox.val())+’&cp=1′;

Tenemos que procesar el array que nos envia google con posibles sugerencias para extraer unicamente la más acertada, también sería posible que se genere un combo con el resto de opciones pero para hacerlo más simple me voy a conformar con una.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
xt = {};
xt.handleResponse = function(suggestions) {
    // Busca la 1era sugerencia
    var searchTerm = parseSuggestionsString(suggestions);
    // Si no hay sugerencias busca esa palabra
    if (!searchTerm) {
        searchTerm = keyword;
        $('#searchTermKeyword').html(searchTerm+' (Exact search)');
    } else {
        $('#searchTermKeyword').html(searchTerm);
        if (searchTerm == currentSuggestion) {
            doneWorking();
            return; //
        }
    }
    /// Busca la primera URL
    getTopSearchResult(searchTerm);
    currentSuggestion = searchTerm;
}

Esa función a su vez debe llamar otra función encargada de parsear el array, una 2da funcion que devuelve datos y veré en la 2da parte del tutorial y finalmente una 3era función que finaliza la búsqueda.

Demo
Download

//// Actualización
Puedes ver la 2da parte de este tutorial AQUI

02Sep 2010 6 Comments

Jquery: Interactuando PHP con elementos sin recargar

Categories: AJAX, javascript - Tags: ,

Para entender este tutorial es necesario tener una mínima base de PHP y Jquery, además de haber leido este otro tutorial. Una vez que tengas todo eso claro vamos a ver como hacer que javascript responda según la respuesta que de el script PHP.


Este script se podría utilizar para verificar si un dato ha sido actualizado, verificar si encontró un registro, etc, etc. Yo por una cuestión de mantener simple el ejemplo voy a hacer que script.php genere un número aleatorio entre el 1 y el 20, si el número generado es mayor a 10 mostrará un mensaje (ganaste), de lo contrario mostrará otro mensaje, si en vez de ese else no pongo nada pues simplemente no se actualizará el DIV. Tengamos en mente que no sólo puede actualizarse un DIV es posible mostrar mensajes, cargar formularios y hacer cualquier cosa que javascript y nuestra imaginación permita.

miscript.php

1
2
3
4
5
6
<?php
/// aqui puedo hacer invocaciones a la base de datos o lo que se me ocurra
$minumero=rand(1,20);
/// retorno una respuesta
echo $minumero;
?>

Mi codigo javascript

Luego de invocar a jquery, necesitariamos el sgte. código:

1
2
3
4
5
6
7
8
9
10
11
function recargar(){   
    var variable_post="Mi texto recargado";
    $.post("miscript.php", { variable: variable_post }, function(data){
        //// Verificamos la rpta entregada por miscript.php
        if (data>10) {
            $("#recargado").html('Has ganado con un puntaje de: '+data);
        } else {
            $("#recargado").html('Has perdido con un puntaje de: '+data);
        }  
    });        
}

Observación 1: Si fuera una invocación a la base de datos puedes enviarle a javascript un valor boolena true/false para saber si se encontraron resultados.

Observación 2: Esto funciona bien con respuestas simples, si requiero devolver varias variables lo mejor es enviarlas como cadena y luego parsearlas algo como: mivariable1=algo&mivariable2=algo&mivariable3=algo… pero si necesitas recoger un gran volumen de datos como retorno lo ideal sería obtener una respuesta XML o JSON



24Aug 2010 8 Comments

Jquery: ocultar mostrar varios elementos

Categories: javascript - Tags: ,

Hace un tiempo publiqué un tutorial explicando como como ocultar o mostrar un elemento, pero también es posible hacerlo con múltiples elementos sin tener que agregar un script por cada elemento, para eso hay que usar id que identifiquen a los elementos y clases para conocer su estado.


Simplemente con fines didácticos he planteado el ejemplo usando el evento onclick y usando clases sin embargo es posible simplificarlo mucho más asignando el click desde jquery y no usando clases sino atributos.

El HTML de los elementos

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="visible" id="item1">
    <input type="text" size="25" />
</div>
<div class="visible" id="item2">
    <input type="text" size="25" />
</div>
<div class="visible" id="item3">
    <input type="text" size="25" />
</div>
<div class="visible" id="item4">
    <input type="text" size="25" />
</div>
<div class="visible" id="item5">
    <input type="text" size="25" />
</div>
<div class="visible" id="item6">
    <input type="text" size="25" />
</div>

Es posible usar cuantos elementos se requieran y puede usarse cualquier tipo de elemento no exclusivamente div, basta que les pongamos un id y la clase que me indica su estado (visible/invisible)

Para el menu que muestra u oculta los elementos, sería el siguiente script:

1
2
3
4
5
6
7
8
<ul>
    <li><a href="#" onclick="javascript:oculta('item1')">Oculta/Muestra</a></li>
    <li><a href="#" onclick="javascript:oculta('item2')">Oculta/Muestra</a></li>
    <li><a href="#" onclick="javascript:oculta('item3')">Oculta/Muestra</a></li>
    <li><a href="#" onclick="javascript:oculta('item4')">Oculta/Muestra</a></li>
    <li><a href="#" onclick="javascript:oculta('item5')">Oculta/Muestra</a></li>
    <li><a href="#" onclick="javascript:oculta('item6')">Oculta/Muestra</a></li>
</ul>

La función para ocultar/mostrar usando jquery

Como vemos el menu invoca a una función llamada “oculta” y le envía como parámetro el id del elemento que queremos ocultar o mostrar según sea el caso, una vez que capturamos ese elemento pasamos a verificar si esta o no visible para finalmente aplicarle una pequeña animación según sea el caso.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function oculta(elemento) {
        ///// capturamos el elemento
    item=$("#"+elemento);
       ///// verificamos su estado
    if($(item).hasClass('visible')) {
        $(item).removeClass('visible');
                //// cambiamos su estado
        $(item).addClass('invisible');
                //// animamos
        $(item).slideUp('fast');
    } else {
        $(item).removeClass('invisible');
        $(item).addClass('visible');
        $(item).slideDown('fast');
    }
}

Demo

20Aug 2010 0 Comments

Sammy: url ajax con soporte del boton atras

Categories: AJAX - Tags:

Seguramente han visto en Facebook que se carga contenido AJAX y al hacerlo se agrega una ruta en el browser(navegador) de tal forma que si apretamos el botón atrás se carga el contenido anterior a la llamada AJAX, pues existe una solución muy simple para hacer esto mismo usando Jquery allí es donde estra a jugar sammy.js

Lo primero es invocar a jquery y a sammy, algo como:

1
2
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/sammy.js"></script>

Luego en el body vamos a insertar un pequeño menu y el contenedor que nos va a servir para el ejemplo:

1
2
3
4
5
6
7
8
<div id="nav">
        <ul>
            <li><a href="#/inicio">inicio</a></li>
            <li><a href="#/formulario">formulario</a></li>
            <li><a href="#/label/drafts">drafts</a></li>
        </ul>
    </div>
<div id="content"></div>

Antes de complicar las cosas veamos como luce la versión más simple:

1
2
3
4
var ratPack = $.sammy(function() {
this.element_selector = '#content';
       // todas nuestras rutas irían aquí
});

En nuestro menu hay 3 rutas: #/inicio, #/formulario, #/label/drafts
Eso significa que por cada ruta debemos insertar un código similar a este:

1
2
3
4
this.get('#/inicio', function(context) {
              context.app.swap('');
              context.$element().append('<h1>inbox</h1>');
});

Lo único que hago allí es que al ingresar la ruta misitio.com#/inicio se va cargar en el div content un titulo H1
Pueden ver un ejemplo más complicado incluyendo envío de formularios AQUI

Para el envío de formularios usando el método POST el código sería algo así:

1
2
3
4
5
this.post('#/formulario', function(context) {
              context.app.swap('');
              var to = this.params['to'];
              context.$element().append('<h1>hola ' + to + '</h1>');
          });

Igualmente para los que hablan inglés pueden ver el tutorial que tomé como modelo AQUI

Suscribete

Ahora también puedes suscribirte via correo electrónico

Ingresa tu dirección de correo:

Delivered by FeedBurner


Facebook

Mi Galeria flickr

[ Ver más ]

© Copyright - Miguel Manchego - Design by Kriesi