Search code examples
javascriptjqueryajaxlightboxfacebox

Ajax and facebox problem


I have a website that uses ajax jquery and facebox. Demo here : http://temp.nevergone.eu/facebox.php Inside the div "#content" there are some links to other pages that open fine using facebox.

If I reload the content of that div using ajax jquery , then the links wont popup using facebox effect anymore.

I tried to create a function that I would call whenever I call the function that changes the contents of div #content , but no luck . I know that I must reinit/reload the facebox to DOM everytime I load something new to the page that contains rel="lightbox" ,but I cant figure it out how.I call this inside It works if I use jquery HTML function , but if I use load function it wont work anymore.

function updatec() {
    $("#content").load('sometext.html');
    reinit();
}

function reinit() {
  $('a[rel*=facebox]').facebox() ;
}

sometext.html contains only<a href="http://www.google.com" rel="facebox">CLICK ME I DONT WORK</a>(if you click it it wont open using facebox,it will open like a normal link)'


Solution

  • I think I got your problem. you are reinitializing your facebox script before you insert the content.

    What you currently have is this:

    function reinit() {
       $('a[rel*=facebox]').facebox() ;
    }
    function updatec() {
    reinit();
    $("#content").html('<a href="http://www.google.com" rel="facebox">CLICK ME I DONT          WORK</a>');
      }
    

    You need to move your reinit function below the html insertion like so:

    function updatec() {    
    $("#content").html('<a href="http://www.google.com" rel="facebox">CLICK ME I DONT          WORK</a>');
        reinit();
      }
    

    Sometimes you just need another pair of eyes on a problem.