Sunday, March 20, 2011

Lightbox not working in Ajax.Updater div (prototype)

I am using an Ajax.Updater call to produce a single rental listing's information in a div. A dropdown menu of all the rental listings starts things off, and the div is hidden until the user selects a listing, in which case a javascript effect makes it appear and the updater is executed.

A php file is called from the updater which queries the database, generating and laying out all the information (description, features, images) into a single variable which is then echoed to display the data.

I want the ability for the images to be clicked and displayed in a lightbox but it isn't working. Furthermore, lightbox works on the rest of the site.

I am using Smarty Templates, adding another layer to the mix, which contains the links to the css and js files. I can style the content echoed from the php file, and lightbox works on the rest of the page just not with the ajax content.

Thanks.

From stackoverflow
  • you need to call initLightbox() after the new content has loaded, either by placing it inside the dynamic content and adding evalScripts:true to your ajax.updater or by placing it within the onComplete callback

    Ben : Thanks seengee. I added "onComplete: initLightbox" to my updater and it worked!
    seengee : no worries,please click the "accept answer" button so people know the question in answered.
    Cruachan : Thanks for this, it just solved the exact same problem for me. Also in my case I needed to remove the existing events as if not the lightbox was called twice

0 comments:

Post a Comment