Shadowbox won't work with a page loaded by AJAX

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

Shadowbox won't work with a page loaded by AJAX

Paulo Coneglian
Hey guys, what's up?
First of all, I know there are a bunch of topics asking for the same question here, but I've read all of them and could not figure out how do make it work.
When I load the page for the first time, it works fine, but since I load a content throught ajax the same link with (rel[]) don't work. Instead open the Shadowbox, it opens the image on the browser, as it doesn't have any code on it.
Follow below the code I use to load the page "callProjeto.php", which contains the dynamic content linked to the Shadowbox script:

var xmlhttp;

function showProjeto(str)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Browser does not support HTTP Request");
  return;
  }
var url="callprojeto.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChangedProjetos;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChangedProjetos()
{
if (xmlhttp.readyState==4)
{
document.getElementById("freak").innerHTML=xmlhttp.responseText;
document.getElementById("puremassacre").style.display="none";
}
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

and this on the main page:

<script type="text/javascript"> Shadowbox.init(); </script>
I'd be glad if anyone could help me out with this.

Peace.
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox won't work with a page loaded by AJAX

Wizzud
This post was updated on .
After successfully inserting into the DOM you need to run Shadowbox.setup() for any links within the newly inserted HMTL.
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox won't work with a page loaded by AJAX

Paulo Coneglian
Ok, so I gotta insert Shadowbox.setup() in my callProjetos.php page. Am I right?
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox won't work with a page loaded by AJAX

Wizzud
No, that's what is being inserted, not what is doing the insert!
Combine literacy with curiosity and a whole world of information opens up to you
PC
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox won't work with a page loaded by AJAX

PC
Hey Wizzud, I understand I have to insert the Shadowbox.setup() into my JS page. The question is, How to re-build the links with rel using ajax (as I read on some posts). It's not clear for me. Could you show me an examople using the code I posted here. Sorry for bothering, just want it done asap.

Thx
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox won't work with a page loaded by AJAX

Wizzud
___.innerHTML = ___; // <= your DOM insert of AJAX-retrieved html
Shadowbox.clearCache(); // <= clear Shadowbox's cache
Shadowbox.setup(); // <= set up all Shadowbox links
(Shadowbox v3.0rc1)

[ Ideally, on the assumption that all AJAX loads are going into the same target element, you would teardown() all Shadowboxed links within the target before overwriting with the new content, then just setup() any new links within the just-loaded content. ]
Combine literacy with curiosity and a whole world of information opens up to you
PC
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox won't work with a page loaded by AJAX

PC
Thx for you patiente Wizzud. I've got it working now.

Happy New Year,
Peace
Reply | Threaded
Open this post in threaded view
|

Re: Shadowbox won't work with a page loaded by AJAX

lgmachine
In reply to this post by Wizzud
Thanks for this post! I had trouble using Shadowbox with Theme Trusts' Reveal Wordpress theme and this worked.