Uso simple de la función JavaScript “getElementById” dentro de aplicativo GeneXus


Hola vamos hacer uso de una función JavaScript la cual tenemos almacenada en una librería dentro de nuestro directorio “images” en la raíz de nuestro aplicativo servidor Tomcat en mi caso yo lo tengo aquí “E:\servicios.www\gymsoft\images\dwresource\dwr\ dwr.js.lib.js”, la cual contiene la función “getElementList”, esta busca por el id de una etiqueta HTML y la oculta o la muestra, he aquí el código;

function getElementList(id,msgText){
mostrado=0;
elem = document.getElementById(id);
if(elem.style.display=="block")mostrado=1;
elem.style.display="none";
if(mostrado!=1)elem.style.display="block";
}

Primero creamos un WebPanel con una tabla 1 x 1, dentro de esta celda colocamos un “Embedded Page”, luego un TextBlock al cual le colocaremos en la propiedad “ControlName” el valor de “ClickAqui”, esto debe de quedar algo como asi:















Luego editamos el código HTML del WebPanel (Click derecho en el form y seleccionamos "Edit Form"), añadimos una etiqueta HTML (Un div) la cual va a tener como Id el valor "DWR01" y la propiedad style="DISPLAY: none", esto quedara algo como asi:



Posterior mente vamos a incluir en el evento "start" de la forma las siguientes líneas:
Event Start
Form.JScriptSrc.Add("dwresource/dwr/dwr.js.lib.js")
EmbPage1.Source = "http://dwresource.blogspot.com/"
ClickAqui.JSEvent("onclick","getElementList('DWR01','');")
EndEvent // Start

Donde
  • " Form.JScriptSrc.Add("dwresource/dwr/dwr.js.lib.js")" incluye la libreria js donde se encuentra la función.
  • EmbPage1.Source = "http://dwresource.blogspot.com/" Incluye el valor para almacenar dentro de la pagina embebida.
  • ClickAqui.JSEvent("onclick","getElementList('DWR01','');") Le asociamos al TextBlok el llamado a la función "getElementList".
Si todo ha salido bien entrar un WebPanel el cual tendra un Link y cuando cliquees en el mostrara u ocultara el blog de DWR sin refrescar la pagina.

Espero que sirva de algo este pequeño aporte.

2 comentarios:

Necromante dijo...

¿En qué versión de GeneXus desarrollaste este ejemplo? En mi trabajo tienen GeneXus X Evolution 1 versión 10.1.46473 U6 pero vale la pena intentar.

Unknown dijo...

Interesante Blog, espero que sigas mostrando mas cosas como esta excelente!!!

Walter Alburqueque C.
Analista de Sistemas
SBA S.A