Una consulta algo complicada: Asp y Ajax

29/06/2007 - 03:01 por Arturo Costa Delgado | Informe spam
Buenas tardes:
Bueno, esta va a ser una consulta algo larga pero espero al final poder
haberme dejado entender. La idea es la siguiente. En una página ASP
tengo un menú compuesto por gráficos (botones) que tiene un efecto hecho
con javascript para que cambie de imagen cada vez que el mouse esta
sobre uno de estos botones. Cuando se hace clic en uno de estos botones
(no son de formulario por si acaso), se carga un contenido en un layer
específico haciendo uso de Ajax.

Lo que desearía poder hacer es que una vez cargado el contenido
invocado, el botón cambie por una imagen fija.

Estos son los códigos:

MAIN.ASP
<script src="setup/ajaxscripts.js" type="text/javascript"></script>
<script src="setup/botones.homepage.js" type="text/javascript"></script>

<!-- INICIO SECCIÓN PRINCIPAL CON AJAX-->
<div id="seccionPrincipal" style="position:absolute; left:0px;
top:345px; z-index:40; height: 600px; width:500px;">
..
</div>

<!-- MENU SUB-SECCIONES -->
<div style="position:absolute; left:550px; top: 675px; z-index:11;">
<a href="javascript:ventana(1);"
onMouseOut="imageChange('menu1','graphic101')"
onMouseOver="imageChange('menu1','graphic101on')">
<img src="imagenes/png/quienesSomosOFF.png" name="menu1" width="200"
height="17" border="0">
</a>
</div>



BOTONES.HOMEPAGE.JS
graphic101= new Image();
graphic101.src = "imagenes/png/quienesSomosOFF.png";
graphic101on = new Image();
graphic101on.src = "imagenes/png/quienesSomosON.png";

function imageChange(imageID,imageName)
{document.images[imageID].src = eval(imageName + ".src");}



AJAXSCRIPTS.JS
function ventana(n)
{
var miAleatorio = parseInt(Math.random()*9999999999999999999);
var seccionPrincipal;seccionPrincipal =
document.getElementById('seccionPrincipal');

ajax=nuevoAjax();ajax.open("GET",
"consultaServicios.asp?clase="+n+"&"+miAleatorio,true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
if (ajax.status= 0)
{
seccionPrincipal.innerHTML = ajax.responseText
}
}
}
ajax.send(null)
}


Todo funciona bien pero no he encontrado la forma que, luego de hacer
clic en la imagen correspondiente al boton, y luego de cargar la
información en el layer "seccionPrincipal", el botón cambie a otra
imagen, digamos una "quienesSomosSEL.png".

Creo que la cosa para por poner un ID al DIV del botón, algo como esto:

<div style="position:absolute; left:550px; top: 675px; z-index:11;"
ID="BOTON01">

y luego mediante Ajax, cargar la imagen "quienesSomosSEL.png". Pero no
estoy seguro donde ubicar este código. Probe incluir una rutina dentro
del link, algo como esto

href="javascript:ventana(1);elementoSeleccionado(1);"

pero no dió resultado. Estoy seguro que es una cosa de nada y que la
idea esta bien, pero bueno, no se si les ha sucedido cuando uno trata y
trata y de pronto se bloquea y ni para adelante ni para atrás.

Espero haberme dejado entender.
Agradezco mucho el apoyo que me puedan brindar.
Un saludo desde Lima, Perú

ACD
 

Leer las respuestas

#1 urko binarya
29/06/2007 - 09:31 | Informe spam
Tienes que tener en cuenta que con ajax tarda en cambiar los estados
"readystate"
PERO la funcion sigue su curso esto es ejecutas vetana
pasa por la carga de ajax y continua , vamos que puede haber llegado a la
linea
setTimeout("cargarContenidoMain("+n+")",1000);
y luego ejecutar el onreaadystatechange al cambiar el estado a 2...4
intentaria subirle el timeout.

tenia el mismo problema o parecido cargando con ajax diferentes Divs me
cargaban dependiendo de cual
cambiaba antes el readystate, se truncaban porque utilizaba la misma
variable

decidi entonces utilizar un sistema de carga por arrays
esto es cargaba en un array la pagina y el div correspondiente
y llamaba a una funcion recursivamente para cargar la pagina
correspondiente
hasta llegar al limite del array
si necesitas algo asi posteo.

no se si me explicado correctamente.

saludos
urko




"Arturo Costa Delgado" escribió en el
mensaje news:
Buenas noches:
Me entusiasmé muy pronto. He encontrado un pequeño problema. El cambiar la
imagen del botón por una tercera no es ya problema sino un punto
intermedio. Como varios de los procesos realizados con Ajax son realmente
rápidos, he creado una pequeña rutina para mostrar un gif animado de los
similares a los "precargas" que aparecen en varios sitios (entre ellos el
de Microsoft o como por ejemplo el del icono de la pestaña del IE7 cuando
carga una página).

Estas son las rutinas:

MAIN.ASP
<script src="setup/ajaxscripts.js" type="text/javascript"></script>
<script src="setup/botones.homepage.js" type="text/javascript"></script>

<!-- MENU SUB-SECCIONES -->
<div style="position:absolute; left:550px; top: 675px; z-index:11;">
<a href="javascript:ventana(1); MENUSECCIONES(1)"
onMouseOut="imageChange('menu1','graphic101')"
onMouseOver="imageChange('menu1','graphic101on')">
<img src="imagenes/png/quienesSomosOFF.png" name="menu1" width="200"
height="17" border="0">
</a>
</div>


AJAXSCRIPTS.JS
function ventana(n)
{
var miAleatorio = parseInt(Math.random()*9999999999999999999);
var seccionPrincipal;seccionPrincipal =
document.getElementById('seccionPrincipal');

ajax=nuevoAjax();ajax.open("GET",
"consultaServicios.asp?"+miAleatorio,true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
if (ajax.status= 0)
{
seccionPrincipal.innerHTML = ajax.responseText
}
}
}
ajax.send(null)

setTimeout("cargarContenidoMain("+n+")",1000);
}

function cargarContenidoMain(dato)
{
var miAleatorio = parseInt(Math.random()*9999999999999999999);
var seccionPrincipal;seccionPrincipal =
document.getElementById('seccionPrincipal');

ajax=nuevoAjax();ajax.open("GET",
"consultaServicios.asp?clase="+dato+"&"+miAleatorio,true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
if (ajax.status= 0)
{
seccionPrincipal.innerHTML = ajax.responseText
}
}
}
ajax.send(null)
}

function menuSecciones(dato)
{
var miAleatorio = parseInt(Math.random()*9999999999999999999);
var boton01;boton01 = document.getElementById('boton01');

ajax=nuevoAjax();ajax.open("GET",
"nw-botonesSecciones.asp?clase="+dato+"&"+miAleatorio,true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
if (ajax.status= 0)
{
boton01.innerHTML = ajax.responseText
}
}
}
ajax.send(null)
}


Me explico. La primera función Ajax que llaman a la página
CONSULTASERVICIOS.ASP, la función ventana(n), lo único que hace es mostrar
un gif animado por 1 segundo y luego llamar a la función siguiente que es
la que hace todo el proceso. La función MENUSESIONES lo único que hace es
cambiar la imagen directamente del botón pulsado.

Sin embargo, se ejecuta todo correctamente PERO no me muestra el gif
animado. Como si por alguna razón evita ese paso pero sin embargo la
función VENTANA pasa correctamente los datos a la función
CARGARCONTENIDOMAIN.

La página CONSULTASERVICIOS.ASP es un simple Select Case donde el case
correspondiente al gif animado es un Case Else.

Espero haberme dejado entender. Ojalá puedan darme alguna idea.
Un saludo desde Lima, Perú

ACD

Preguntas similares