Manejo de Historial para Ajax

Antes de empezar con el ejemplo debemos considerar que, para realizar este ejercicio, utilizaremos como prerequisito haber realizado el ejercicio de

javascript y ajax descrito en diciembre del 2007.

También pueden definir un combobox de html fijo, definido por ustedes mismos con options puestos en duro (Hard code), en el caso que no deseen realizar el ejercicio de javascript y ajax

Entonces, considerando lo antes expuesto empecemos con los truquitos:

Si en una organización se encuentra institucionalizado el navegador de Mozilla (Firefox), es posible sobrescribir el has de la tabla.

Este truco no funciona para Internet Explorer 6.0 pero para el 7.0 sí, ya que este no permite sobre escribir el Hash. Para Internet Explorer 6.0 veremos como hacer un truquito con un iframe para dejar una huella de donde pasamos para que el historial se sobrescriba, claro esta, que si refrescamos la página, el historial del navegador se perderá, ya que estamos navegando dentro del iframe de la página y no dentro de páginas.

¡Ahora a lo suyo!

Sobrescribiendo el Hash para otros navegadores que no son Internet Explorer 6.0.

Para ello trabajaremos con la página que creamos en javascript y ajax , esta es inicio.aspx.

Antes que todo, para que la información se despliegue en Firefox deberemos modificar la función getEmpleado_callback(), la cual quedará de la siguiente forma:

function getEmpleado_callback(res) {
if (res.error!=null){
alert(res.error);
}else{
for( i=0; i<res.value.Tables[0].Rows.length; i++) {
var opcion = document.createElement("OPTION");
document.frm.sltEmpleado.options.add(opcion);

opcion.id = res.value.Tables[0].Rows[i].EmployeeID;
opcion.innerText = res.value.Tables[0].Rows[i].LastName;
opcion.innerHTML = res.value.Tables[0].Rows[i].LastName;
}
}
}

Aquí se observa por que debemos saber JavaScript, ya que para acomodar el código para los distintos navegadores debemos saber que código agregar, de lo contrario, si no hubiéramos agregado la ultima línea (opcion.innerHTML) la información en Firefox no se nos habría desplegado, aunque los id’s si.


Dentro de la definición de código de JavaScript agregaremos dos funciones, las cuales detallamos a continuación:

function funEscribirHush(newHash){
window.location.hash = newHash
}

function funNuevoHash(){
var oFrame = document.forms[0];
var oSelect = oFrame.sltEmpleado;

return oSelect.options[oSelect.selectedIndex].id;
}

Ahora, para que funcione el manejo de history del navegador de FireFox, agregaremos en el select de html la siguiente llamada, en el evento onChange:

<select id="sltEmpleado" onchange="return funEscribirHush(funNuevoHash());">
</select>

Ahora si ejecutamos la página y seleccionamos cualquiera de las opciones, veremos que se ha escrito el History en el navegador de Firefox y en Internet Explorer 7.0.

Si ejecutamos este código en Internet Explorer 6.0, veremos que no nos funciona, por lo cual haremos otro manejo de History, que nos funcionará tanto para Mozilla Firefox, como para Internet Explorer, esto está amarrado a la creación de un IFrame y de una página, que llamaremos página fantasma, ya que estará en blanco y será una página html.

Manejo de Historial con IFRAME

Dejando la llamada de la función FunEscribirHush en el evento onChange del select de html, realizaremos los siguientes cambios:

Primero agregaremos un archivo .html que llamaremos inicio.html.

A continuación agregaremos un iFrame dentro del body del html, a continuación del select definido, el cual instanciará a la página html que hemos creado, esto se realizará de la siguiente forma:

<iframe id="ifrNavegar" style="display:none;" src="inicio.html"/>

Si ejecutamos la página podremos ver que esta se despliega como siempre, lo que hemos hecho es ocultar el iframe ahunque este será utilizado.

El siguiente paso será crear en un JavaScript la función que actualizará la llamada del src del iframe, para esto concatenaremos en la url el valor de la selección realizada. La función se debe definir de la siguiente forma:

function funIFrameActualizar(){
var oFrame = document.forms[0];
var oSelect = oFrame.sltEmpleado;

var opcion = oSelect.options[oSelect.selectedIndex].id;

document.getElementById("ifrNavegar").setAttribute("src", "inicio.html?opcion=" + opcion);
}

Con esto el navegador deja una huella que debe seguir mientras se esta posicionado en la página.

Lo que nos falta es actualizar la llamada a esta función en el evento onchange del control de html Select, quedando de la siguiente forma:

<select id="sltEmpleado" onchange="javascript:funIFrameActualizar();">

Probaremos el ejercicio y veremos su comportamiento.

Administrar parámetros entre las páginas que actuan en el manejo del iFrame

En el caso de que queramos guardar un valor en la página inicio.html y luego utilizarlo una vez que se ha actualizado la información, se puede rescatar en la página referenciada del iframe y luego enviarla a la página padre, esto se hace de la siguiente forma:

En la página inicio.html agregaremo la siguiente funcione en JavaScript, que se ejecutará al cargarse la página, esta función rescatará un parámetro en específico de la cadena entregada en la url y retornará el valor al padre.

function init(){
var dato = parametroRescatar('opcion');

perent.funDatoRescatar(dato);
}

function parametroRescatar(parametro){
var strParametro = window.location.search.split(parametro + '=')[1];
var strDato = strParametro.split('&')[0];

return strDato;
}

La primera función se ejecuta cuando la página es cargada, ya que en el evento onload del body del html, se realiza la llamada a la función init(), luego rescata el dato deseado y llama a la función del padre, para pasarle el parámetro. Esta función debe estar definida en el padre para que recate el dato.

<body onload="javascript:init();">

En el padre se creará una función que capturará este valor y que para nuestro entender lo desplegará en la interfaz, pero que podría actualizar un control de html para ser utilizado en la página.

function funDatoRescatar(opcion){
alert(opcion);
}

Bueno amigos, para los que ayan seguido el artículo hasta el final les comunico que este era más que un simple artículo de AJAX y AJAXPRO, ya que aparecieron en este varios trucitos que no aparecen en los foros comunes y que no se encuentran en cualquier parte, esta información ha sido acumulada por la participación que he tenido en proyectos de este tipo como he mencionado.

Espero que les gustara este artículo.