Jquery es un estupendo framework de desarrollo en javascript que, utilizado en conjunto a los widgets de Jquery UI, nos permite dar a nuestras aplicaciones un toque de riqueza a su interfaz de usuario.

Uno de los widgets más utilizados en Jquery UI es Dialog, que nos permite abrir una ventana ajax en la que podemos insertar formularios o cualquier contenido html que nos interese, de la misma forma que lo insertaríamos en un div normal.

Uno de los problemas más frecuentes que se dan con Jquery UI se nos presenta cuando en nuestro contenido tenemos una película flash embebida. La ventanita del Dialog Box queda detrás de la misma y resulta imposible visualizar el contenido que contiene.

Para solucionar esto, debemos pasarle el parámetro wmode con un valor opaque al código flash que inserta nuestra película flash en el contenido. Lo muestro en un ejemplo con un video de blip.tv

<object width="634" height="387"
           type="application/x-shockwave-flash"
           data="http://blip.tv/play/71yBqdFXAA%2Em4v">
  <param value="http://blip.tv/play/71yBqdFXAA%2Em4v" name="src">
  <param value="true" name="allowfullscreen">
  <param name="wmode" value="opaque">
</object>

Cuando te acostumbras a programar siguiendo el patrón MVC, te resulta incómodo y poco limpio el hardcodear Html en el código interno de la aplicación.

Si embargo en JavaScript, estamos mal acostumbrados a ver códigos como el siguiente:

var html = "<li class='" + class + "'>" +
           "<input type='text' id='"+ id +"' /></li>";

Aunque el código en sí no es incorrecto, cuando tenemos que realizar cambios en nuestra aplicación (situación bastante común) sin volvernos locos, necesitaremos separar o hacer más mantenible ese código html que queremos dinamizar desde javascript.

Una solución consiste en escribir el código html que vamos a reutilizar desde javascript, con una serie de patrones que sustituiremos más adelante por los valores que nos interesen.

Por ejemplo, si quisiéramos rellenar el siguiente elemento <ul>

<ul id="list"></ul>

Junto antes de terminar el body colocaríamos el siguiente bloque de código

<div id="bloque_lista" style="display:none">

  <li class="|class|">
    <input type=”text” id=”input|row_id|” />
  </li>

</div>

Para rellenar la lista, bastaría con sustituir los patrones |class| y |row_id| por los valores que necesitemos.

function addItemToList() {

   var list     = $('#list');
   var class    = "rosa";
   var template = $('#bloque_lista').html();

   template = template.replace(/|class|/gi, class)

   for(var id=1;id<11;id++){

     list.append(template.replace(/|row_id|/gi, id));

   }

}

Saludos, Asier Marqués