¿Estás desarrollando una aplicación web en la que usas JSON o AJAX para cargar dinámicamente datos? ¿Además necesitas cargar dinámicamente no solamente datos sino también código javascript para ser utilizado en la página? A continuación te expongo el modo de hacerlo para que funcione en FireFox 3.X y IE7 (casualmente, también funciona en IE6).
Voy a partir de la base de que utilizas jQuery para la consulta JSON o AJAX al servidor. Y me voy a centrar en la "carga" del código javascript. Pero obviamente, no importa la librería o código que uses para el JSON o AJAX. Hay muchísima literatura en internet sobre ese tema.
Ejemplo de carga de datos
Empezaré con un ejemplo de carga de datos tipo texto, que es lo más habitual. Y luego pondré un ejemplo de carga de código javascript.
function js_actualizar_top_webs(){
var url_json = 'json_top_webs.php?mes='+$('#select_mes').val();
$.getJSON(
url_json,
function(datos){
$('#div_top_webs').html(datos.table_webs);
}
);
}
Imaginemos que en nuestra web de ejemplo tenemos un control tipo lista desplegable (select) que permite al usuario escoger un mes del año, y queremos que nuestra página recargue un
<div id="'div_top_webs'"></div> con la lista del top 10 de webs de ese mes. Es un ejemplo clásico de recarga de datos dinámica usando JSON o AJAX.
Para ello construimos una función llamada
js_actualizar_top_webs, que llamaremos al cambiar el valor de ese select. Esta función tal como está definida en el código de ejemplo hace una llamada JSON mediante el objeto $ de jQuery y cuando los datos se hayan recibido por completo ejecutará el código en rojo, en dónde "
datos" es un objeto de javascript (no un array!!) que contiene diferentes "propiedades" con los datos enviados. En este caso, suponemos que el archivo de PHP que ha sido llamado devuelve un string llamado "
table_webs" que contiene el código HTML de un "
<table>" con la lista de webs que queremos mostrar.
Para "obtener" el valor de ese string HTML simplemente llamamos a
datos.table_webs y lo colocamos como "contenido" de "
div_top_webs" mediante el método
.html() de jQuery. ¿Sencillo, no?
Ejemplo de carga de código javascriptBueno, vamos ahora a algo que "cuesta" un poquitín más. Bueno, de hecho a mí me ha hecho gastar casi 8 horas de cansada búsqueda por internet y de leer mucho y probar mucho, hasta llegar a lo que te voy a poner aquí! ;)
Abajo tienes el código anterior ligeramente cambiado: hemos añadido unas líneas de código más, con el fin de poder cargar y ejecutar un código de javascript elaborado en el lado servidor.
function js_actualizar_top_webs(){
var url_json = 'json_top_webs.php?mes='+$('#select_mes').val();
$.getJSON(
url_json,
function(datos){
$('#div_top_webs').html(datos.table_webs);
if (window.execScript) window.execScript(datos.script_leyenda);
else window.eval(datos.script_leyenda);
}
);
}
Puedes ver en rojo dos nuevas líneas que corresponden a una sentencia condicional, y esto es necesario para ejecutar un código u otro según estemos en FireFox o en Internet Explorer (como mínimo estos dos navegadores). Para ambos casos el código de javascript pasado es el mismo y lo recuperamos de nuevo mediante jQuery con la propiedad
datos.script_leyenda (que habremos rellenado desde el PHP con el código javascript que necesitemos ejecutar en nuestra web).
La diferencia radica en que
Internet Explorer ejecutará el código de javascript mediante el método window.execScript(), mientras que
FireFox ejecutará el código al usar el método window.eval(), en ambos casos pasando como argumento el código javascript que queremos ejecutar.
Otro aspecto importante y que tal vez pase desapercibido a primera vista es que en ambos casos ejecutamos sendos métodos sobre el objeto
window. Eso es fundamental (me llevó más de una hora leyendo descubrirlo), para que el código javascript a ejecutar pase a estar "disponible" desde otros "ámbitos" de la misma página. De esta forma, si por ejemplo, dentro de ese código cargado dinámicamente definimos una función llamada "
js_mostrar_leyenda()", si queremos usarla en el resto de la página, deberemos llamarla así:
window.js_mostrar_leyenda();Estoy seguro de que a más de uno le va a ir de perlas estas 3 líneas de código! al menos a mí me va a dar mucha potencia de programación con JSON y javascript. Y sinceramente, cuesta encontrar información "actualizada" en internet. Ya sabes que este tipo de información técnica (especialmente cross-browser) se desfasa con facilidad, con la salida de nuevas versiones de navegadores continuamente!! Así que lo que es válido hoy deja de serlo al cabo de 2 años :(
Te invito a que comentes cualquier sugerencia que tengas al respecto, eh! seguro que a todos nos interesa (temas de compatibilidad, por ejemplo). Si probando el código ves que te funciona en otros navegadores, por favor, coméntalo brevemente ;)
Un saludo!!!
SERGI
