Experimentando con jQuery

Situación
Còmo encarar el proceso para crear y debuggear un script jQuery. Mediante un ejemplo, trabajaremos sobre una pàgina que contenga una lista con al menos una columna de tipo calcHTML. Este post se basa en el video de Paul Grenier en EndUserSharePoint

Solución
OBJETIVO DEL SCRIPT:
Si en una columna de una lista SharePoint tenemos còdigo HTML, el browser lo despliega literalmente, es decir con los tags visibles. Para que se despliegue en forma correcta tenemos que: localizar los objetos en la definiciòn del HTML de la pàgina y transformarlos mediante jQuery.
La pàgina para debug contiene inicialmente una list web part, donde al menos una columna es de tipo calcHTML, por ejemplo para mostrar letras grandes y en rojo queda definida como:
"<DIV style='font-weight:bold; font-size:12px; color:red; display: inline;'>ALGUN TEXTO</DIV>").

1) El primer paso es agregar una CEWP y el siguiente còdigo inicial, que cargarà el jQuery para poder invocarlo:

<script src="/jquery/jquery.js" type="text/javascript"></script>

<script type="text/javascript">


2) Usando Firebug, inspeccionamos los elementos de la columna tipo calcHTML, para detectar dentro de què objetos se encuentra. Es conveniente buscar en el DOM los "child nodes" del objeto y dentro de estos si el nodename tiene el atributo "text". Tambien se puede observar el innerHTML en busca de una referencia codificada.

3) Copiando el innerHTML que se encuentre (por ejemplo: ""& l t;p style='font-weight:bold;..."") lo pegamos en Notepad++ para posterior uso.

4) Para empezar a "jugar" con Firebug, conviene buscar los objetos que contienen el nodo identificado antes y podemos empezar a probar la funciòn jQuery que los encuentre. Por ejemplo:
$("td.ms-vb2")
devuelve varios objetos, incluyendo a los que estàn en la columna calcHTML.

5) Luego decidimos chequear el atributo "text" entonces ingresamos en Firebug Console lo siguiente:
$("td.ms-vb2").text()
Veremos todos los textos, en el ejemplo que estamos viendo, darà los contenidos de la columna calcHTML.

6) Ahora hay que construir una "Regular Expression" (ver Tutorial) que encuentre los tags definidos en la columna calcHTML. La funciòn jQuery:

$("td.ms-vb2").text().match(/<[^<]+?>/)

encuentra el primer tag HTML (cualquiera que sea), incluyendo los atributos de estilo si es que los tuviera. El mismo resultado, con una regular expression màs completa:

$("td.ms-vb2").text().match(/<[^<]+?>|<.+?>/)

7) Ahora podemos empezar a escribir algo de còdigo. Para obtener todos los elementos los guardamos en un array y para cada elemento verificamos contra la regular expression, probando en la consola de FireBug:

var arrayList=$("td.ms-vb2");
$.each(arrayList, function(i,e)
{
var MyIf= $(e).text().match(/<[^<]+?>|<.+?>/);
console.log(MyIf);
});

8)Luego aplicamos la funciòn jQuery para convertir en html el resultado:

var arrayList=$("td.ms-vb2");
$.each(arrayList, function(i,e)
{
var txt= $(e).text().match(/<[^<]+?>|<.+?>/);
$(e).html($(e).text());
});

FUNCIONA EN LA CONSOLA!

9) Esta porciòn de còdigo se introduce en la Content Editor Web Part que contiene la invocaciòn a jQuery y listo. Paul provee el còdigo completo en el siguiente blog post.