miércoles, 15 de septiembre de 2010

jQuery - Agregando parámetros a links existentes

Hace poco me encontré ante un problema en un sitio que estaba trabajando, y era que había muchísimos links, los cuales necesitaban un parametro adicional para evitar el cache de la página.


Se que hay parametros del html para evitar esto, pero los coloque, pero seguía con el mismo problema. Así que me puse a pensar en otra solución.


Al saber que jQuery puede manipular cualquier parte del documento html, me puse a buscar un poco al respecto en la documentación de la librería.


Aquí el código: 


$(function(){          
       $('a[href]').each(function(i){
            var currHref = $(this).attr("href");
                       
                if (currHref.charAt(currHref.length - 1) === '?')                           
                    $(this).attr("href",currHref);
                else if (currHref.indexOf('?') > 0)                
                    $(this).attr("href",currHref+"&rand="+getRandom());
                else                  
                    $(this).attr("href",currHref+"?rand="+getRandom());
     });               
});
  



function getRandom(){
        var randomnumber = Math.floor(Math.random()*10000); 
        return randomnumber;
}

Ahora expliquemos que hace esto.

  • $('a[href]').each(function(i){...Codigo...});
Esta linea de código su función será buscar todos los elementos anchor dentro del documento, e iterar uno por uno. Durante esta iteración es donde se trabajara para agregarle lo que necesitamos.

  • var currHref = $(this).attr("href");
Ahora almacenaremos en una variable el contenido href de nuestro link.

  •  if (currHref.charAt(currHref.length - 1) === '?')
    $(this).attr("href",currHref);
Ahora buscaremos la posición en donde se encuentre el signo "?" si este nos da un valor -1, quiere decir que no tenemos este signo en nuestro link.


  • else if (currHref.indexOf('?') > 0)                
        $(this).attr("href",currHref+"&rand="+getRandom());
     else                  
        $(this).attr("href",currHref+"?rand="+getRandom());

Por último será agregar el parámetro que queremos agregar a todos nuestros links.


Pero que pasa si en los href utilizas javascript:tufuncion(); pues es un hecho que marcaria error el script, para corregir esto, tendríamos que agregar unas cuentas lineas más de código y quedaría solucionado.


Quedaría:



$(function(){                                      
       $('a[href]').each(function(i){
            var currHref = $(this).attr("href");
            var isAfunction = currHref.substring(0,10);              
            if(isAfunction == "javascript"){                
                $(this).attr("href",currHref);
            }else{
                if (currHref.charAt(currHref.length - 1) === '?')                           
                    $(this).attr("href",currHref);
                else if (currHref.indexOf('?') > 0)                
                    $(this).attr("href",currHref+"&randFert="+getRandom());
                else                  
                    $(this).attr("href",currHref+"?randFert="+getRandom());
            }
     });               
});

Lo que esta en negritas seria nuestro nuevo resultado. Solo buscamos la cadena javascript para evitar que concatene en ese anchor, nuestro nuevo parametro.



Encontré un link donde ya estaban trabajando en ese problema.


http://stackoverflow.com/questions/2667551/add-parameter-to-links-on-page-using-jquery


Probé el código que ahí estaban trabajando, pero no funciono.


Espero esto te sirva.

Nueva Interfaz de Usuario en Twitter

Twitter ha presentado las nuevas funcionalidades e Interfaz que tendrá su plataforma web. Para muchos(incluyéndome)  quisieran ya usar lo nuevo que llegará en un par de semanas, ya que como es costumbre de Twitter, toda mejora se esparce a todos los usuarios poco a poco.

En su blog, hacen mención de 4 puntos principales de cambios en la web, estos son:
  • Nuevo Diseño
De lo que se ve en el diseño en el video, se ve que la usabiliad que le dieron al sitio realmente es sorprendente, se ve un TimeLine donde el scroll de twits no tendrá fin, a menos que llegas al primer twit de tu TimeLine.

  • Contenido Externo
Ahora al agregar contenido externo a los Twits, tales como videos de Youtube,Vimeo o Imagenes de Flickr o TwitPic, estas podrán ser visualizadas sin salir del sitio. Esta funcionalidad si no me equivoco, empezó a introducirla Brizzly en su plataforma para Twitter.

  • Información Pertinente
Ver información del twit relacionada con su autor, tema, @replies , incluso la ubicación del twit.

  • Mini Perfiles
Esta funcion ya estaba incorporada en esta versión pero de una manera más compacta, y era pasar el cursor sobre el nick el usuario para ver más información del mismo.
Ahora con dar click (adios al mouseover) al @nombredelusuario veremos esta misma información pero con un nuevo diseño.

Algo que quisiera resaltar con esta actualización de la interfaz, muchos sitios tales como HootSuite, Brizzly o aplicaciones que se utilizan para Twitter como Twetdeck, Twhirl ,  por citar algunos, pienso que van a tener una baja de usuarios ya que simplemente este Nuevo Twitter se ve genial.  Ahora sólo falta esperar a que la utilicemos y veamos lo que pasa.