Usar tags de Struts2 (o JSP) dentro de Javascript

Cuando estamos haciendo nuestras páginas JSP en un modelo MVC a veces es necesario incluir ciertas funcionalidades complejas mediante frameworks de JavaScript, como por ejemplo JQuery. En este caso, utilizar la ventaja que nos dan los tags de JSP dentro del código Javsacript resulta algo complejo.

Por ejemplo, imaginemos que necesitamos inyectar en una capa un combobox proveniente de un objeto de tipo java.util.List. En Struts2 es muy sencillo si utilizamos el tag <s:select>, que al interpretar el JSP devuelve un código como el siguiente:

Este Tag:

<s:select  list="listadoConceptosEvaluacionTipos" listKey="pk1" listValue="nombre" name="conceptosEvaluacionTipos" theme="simple"></s:select>

Nos da este resultado en HTML:


<select name="conceptosEvaluacionTipos" id="conceptosEvaluacionTipos"><option value="1">Examen</option>
<option value="2">Presentacion</option>
<option value="3">Trabajo en Clase</option>
</select>
Mediante Javascript, usando el framework JQuery, y conocido el ID de la capa destino, es muy sencillo cargar en una capa <div id=”Destino”></div> esta información:
 


$('#Destino').append('<s:select  list="listadoConceptosEvaluacionTipos" listKey="pk1" listValue="nombre" name="conceptosEvaluacionTipos" theme="simple"></s:select>');
 Al servir la página se sustituirá todo el tag <s:select> por el código HTML mostrado arriba.
El problema está en que el código JavaScript que se generará como resultado, y que el cliente interpretará será el siguiente:
$('#Destino').append('
<select name="conceptosEvaluacionTipos" id="conceptosEvaluacionTipos">
<option value="1">Examen</option>
<option value="2">Presentacion</option>
<option value="3">Trabajo en Clase</option>
</select>
');
Esto evidentemente nos llevará a un error de Javascript, puesto que el código HTML resultante del tag <s:select> tiene saltos de línea, cosa no permitida en un texto JavaScript (recordar que es un lenguaje interpretado y por tanto va línea por línea).
¿Cuál es la solución?
Mediante el tag <script> se puede cargar el código HTML que da como resultado la interpretación de <s:select>, asignándole un ID al <script> y leyéndolo con JQuery para incorporarlo al div de destino.
 

<script id="codigoHTML" type="text/html">
 <s:select list="listadoConceptosEvaluacionTipos" listKey="pk1" listValue="nombre" name="conceptosEvaluacionTipos" theme="simple"></s:select>
</script>

Y el Javascript será:

$('#Destino').append($('#codigoHTML').html());
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s