Shadowbox y Ajax

[nebus]

Hola,

He estado viendo los otros mensajes referentes a problemas con javascript y ajax pero no tengo muy claro que mi problema tenga que ver con eso.

Mi caso consiste en una pagina, index.jsp, en la cual creo codigo dinamicamente con java en jsp's que cargo con ajax en un div.

El caso es que en una de estas jsp quiero mostrar unos detalles con shadowbox. Las librerias y estilos han sido añadidas en el index y funcionan correctamente en partes estaticas del mismo index. En el jsp dinamico creo un link (<a>) con el rel adecuado, exactamente igual que en las otras pruebas, pero en este caso no funciona...

A que puede ser debido? En otros jsp's creados dinamicamente hago uso de otras librerias js correctamente...y esta no se porque no.

Saludos y muchas gracias!

[GatorV]

Hola nebus,

Revisa este link: http://www.forosdelweb.com/f77/howto...e-ajax-510438/

Saludos.

[nebus]

Hola,

Muchas gracias por tu respuesta. Ya lei ese articulo pero yo no quiero ejecutar codigo javascript directamente colocado en las paginas que cargo con ajax. En la pagina principal estan declaradas todas las librerias necesarias y en las paginas que cargo con ajax simplemente tengo algo como:

Código HTML:

<a href="mapa.htm" rel="shadowbox;width=500;height=400"> 

De todas formas voy a probar con esa solución porque estoy desesperado ya jeje.

Saludos y muchas gracias!

[GatorV]

En otro post precisamente MoboraK comentaba que debías de re-llamar a Shadowbox.init() nuevamente en tus llamadas asíncronas para que la librería registre los nuevos links.

Prueba eso.

Saludos.

[nebus]

Hola de nuevo,

Muchas gracias por la respuesta. He probado las dos soluciones que se proponen en el otro tema incluyendo una llamada al init de shadowbox en la pagina cargada con ajax y sigue sin funcionar

Alguna idea mas? Muchas gracias!

[GatorV]

Hola nebus,

Leyendo un poco de Shadowbox, en tu función onreadystatechange, debes de llamar a Shadowbox.setup('id_de_tu_div') para volver a cargar los eventos de Shadowbox.

Saludos.

[nebus]

Hola de nuevo,

Muchisimas gracias por tus respuestas y tu tiempo. He puesto la llamada al setup de shadowbox en mi funcion:

Código:

function FAjax (url,capa,valores,metodo)
{
          var ajax=creaAjax();
          var capaContenedora = document.getElementById(capa);

/*Creamos y ejecutamos la instancia si el metodo elegido es POST*/
if(metodo.toUpperCase()=='POST'){
         ajax.open ('POST', url, true);
         ajax.onreadystatechange = function() {
	         if (ajax.readyState==1) {
	         	capaContenedora.innerHTML="<p align='center'><font color='#336699' face='Verdana, Arial, Helvetica, sans-serif'>Cargando.......</font></p>";
	         }
	         else if (ajax.readyState==4){
			 	if(ajax.status==200){
		       		/*var scs=ajax.responseText.extractScript();    //capturamos los scripts
					document.getElementById(capa).innerHTML=ajax.responseText;    //eliminamos los scripts... ya son innecesarios
					scs.evalScript();       //ahora si, comenzamos a interpretar todo  */
	         		document.getElementById(capa).innerHTML=ajax.responseText;
	   			}
	   			else if(ajax.status==404){
		            capaContenedora.innerHTML = "La direccion no existe";
	            }
	    	    else{
	            	capaContenedora.innerHTML = "Error: ".ajax.status;
	            }
	         }
	         Shadowbox.setup(capa,{ width:640, height:480 });
  		 }
         ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded; charset=UTF-8');
         
         ajax.send(valores);
         return;
}

Y ahora me da un error en prototype:

"element has no properties" en el fichero prototype.js linea 3796. Concretamente en esta parte del codigo de prototype.js

Código:

function getEventID(element) {
    if (element._eventID) return element._eventID;
    arguments.callee.id = arguments.callee.id || 1;
    return element._eventID = ++arguments.callee.id;
  }

Alguna idea, voy a seguir investigando.

Saludos!

[nebus]

Bueno, pues por fin he conseguido que funcione, aunque ahora tengo otro problema.

La solución ha sido poner la llamada al setup en la función onreadystatechange, pero en vez de pasarle el nombre del div, pasarle un array con los enlaces que contiene ese div de esta manera:

Código:

Shadowbox.setup(document.getElementById(capa).getElementsByTagName('a'),{ width:640, height:480 });

Con eso basta para que funcione, pero mi nuevo problema creo que es un poco mas generico, ya que no me abre ninguna pagina JSP con shadowbox, da igual donde ponga el link, no abre paginas JSP. Voy a investigar un poco más este tema.

Muchas gracias!

Saludos!

[GatorV]

Hola nebus,

Me da gusto saber que ya funciono correctamente. Tu segundo problema, checa bien que puedas abrir los JSP directamente (copiando y pegando la URL).

Saludos.

[nebus]

Hola,

Los JSP funcionan bien, no se que puede pasar con este tipo de archivos... he solucionado este problema poniendo lo que queria en unos divs ocultos y mostrandolos con shadowbox.

Ahora el problema de mi solucion es que al parecer si le pasas una lista de links, 'a', los convierte todos, tengan o no el rel adecuado, para que abran una ventana de shadowbox y no quiero que todos los enlaces abran eso.

Por lo que ahora me las estoy ingeniando para hacer un script que me devuelva todos los links que tengan en el rel 'shadowbox'

Alguna sugerencia?

Muchisimas gracias!

[GatorV]

A lo mejor lo que podrías hacer es agregarle un class que diferencie que es para el shadowbox, y usar prototype con la función $$.

Saludos.

[neftons]

Estuve leyendo el post y la verdad es que me ha sido de gran ayuda, gracias GatorV y nebus.

Código:

function cargarContenido(file){ 
	var contenedor = document.getElementById('informacion'); 
	ajax=nuevoAjax(); 
	ajax.open("GET", file, true); 
	ajax.onreadystatechange = function() { 
	if (ajax.readyState == 1) {
		var imagen = document.createElement("img");
		imagen.setAttribute("src","../images/loading.gif");
		contenedor.innerHTML="";
		contenedor.appendChild(imagen);
	}
	else if (ajax.readyState == 4) {
		contenedor.innerHTML = ajax.responseText;
	} 
	Shadowbox.setup(contenedor.getElementsByTagName('a'));
	};
	
	ajax.send(null);
}

[vansert]

....hola este post fue hace tiempo...pero queria agradecer el aporte me sirvio bastante para resolver un problema @_@


saludos ^_^

[Poloq]

Me funcionó bien ;)

El post es viejo pero comento por si alguien tiene el mismo problema.

Funciomamiento
Imagen grande y thums abajos, cuando hacia click en los thumbs se cambiaba la imagen en grande.

Cuando hacia click en la imagen grande se abre el Shadowbox con la foto en tamaño real.

Problema
Al cambiar la url de la imagen grande por javaScript no funcionaba ya que no se recargaba el shadowbox. Entonces agregé la función Shadowbox.setup para recargar el Shadowbox cada ves que se cambiaba la imagen por javaScript y funcionó bien.


function cambiarimagen(url){
//alert(url);
document.images['imgprincipal'].src=url;
document.links[10].href=url;
Shadowbox.setup(fotos.getElementsByTagName('a'));
}