dos div, dos contenidos, 1 link

Ruben_C · #1 (**permalink**) 16/04/2008, 16:31

Hola que tal, mi consulta es la siguiente.

Tengo un link, PRODUCTOS, este abre el contenido de una pagina en un div usando ajax.

Pero al dueño del sitio se le ocurrio que ademas de eso, abriera un archivo pequeño

(flash o gif) en otro sector de la pagina, al darle clik al link productos.

¿Se puede conseguir abrir dos contenidos diferentes en dos div?, ¿alguien sabe de algun ejemplo o alguna web con ejemplos para hacerlo?

se agradece cualquier ayuda,

saludos.

GatorV · #2 (**permalink**) 17/04/2008, 08:55

Hola Ruben_C,

Si es posible hacerlo, pero para asesorarte más correctamente necesitaría ver tu código para decirte como modificarlo.

Saludos.

Ruben_C · #3 (**permalink**) 17/04/2008, 09:23

Hola GatorV, este es el codigo que utilizo, me resulta a la perfeccion con un div, pero con dos nop.

Código HTML:

<script type="text/javascript">

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>
</head>
<body>

<a href="javascript:ajaxpage('registro.php', 'contentarea');">test</a> 

<div id="contentarea"></div> // con un solo div funciona perfecto

<div id="contentarea2"></div> //este no se como activarlo

</body>

</html>

si me puedes explicar como se hace, te agradeceria mucho

Ruben_C · #4 (**permalink**) 17/04/2008, 11:50

hola!, me tuve que responder solo, parece que la solucion era muy facil y por eso no hubo interesados en responder, pero bueno.

puse dos veces en el link el java script usando onclick

, y asi lo solucione!!

Código HTML:

<a href="javascript:ajaxpage('index.php', 'contentarea')" onclick="javascript:ajaxpage('detalle.php', 'hola');">test</a> 

<div id="contentarea" style="border:#FF0000 solid"></div>
<p>&nbsp; </p>
<div id="hola" style="border:#00FF00 solid"></div>

funciona en IE7, safari, 3.1, opera 9.20 y firefox,

, en versiones anteriores ni idea.

Si alguien sabe alguna solucion mas elegante, por favor pongala aqui para el uso y abuso de todos, jejeje.

Saludos.

GatorV · #5 (**permalink**) 17/04/2008, 12:15

La solución mas elegante seria que en tu respuesta regresaras las dos paginas, y después procesaras el texto en JavaScript:

Código:

function loadpage(page_request, containerid, containerid2){
        if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
               var respuesta = page_request.responseText.split( "<SEPARADAOR>" );
               var div1 = respuesta[0];
               var div2 = respuesta[1];

               document.getElementById(containerid).innerHTML = div1;
               document.getElementById(containerid2).innerHTML = div2;
}

Luego tu respuesta la regresas de esta forma:

Código:

codigo html
bla
bla
bla
...
<SEPARADOR>
el otro codigo html
bla
bla
bla

Es importante el texto <SEPARADOR> ya que es lo que va a buscar la función JavaScript para separar el texto.

Saludos.

Ruben_C · #6 (**permalink**) 17/04/2008, 12:31

OK!! voy a probarlo