[solution] Calling prototype lightwindow AFTER an AJAX call

By.

min read

My profile

Share this:

Well heck… it appeared that the beautifull lightwindow:
[url]http://stickmanlabs.com/2007/07/10/lightwindow-v20-released/[/url]
http://www.stickmanlabs.com/lightwindow/#demos

[solution below]

was NOT capable of this scenario:
* HTML page (with all correct paths) with an AJAX triggered content page
* content page had a lightwindow link

lightwindow link would open in the same _parent window and not as the neat overlay we want to create.

[b:af04d3db20]What I did:[/b:af04d3db20]
* change the params to iframe calls
* included the code in the to be called content page

However … Well RTFM (Read The Fucking Manual) or in this case … read the user comments on the blog.

I found out that Bart Joosten suggested creating a NEW window object after the completion of the AJAX request …
[quote:af04d3db20=”[url=http://stickmanlabs.com/2007/07/10/lightwindow-v20-released/#comment-821]permalink[/url]”]@Tim: This is not a problem of lightwindow. If you do an AJAX update on your page it gets loaded with new objects. But a window load event won’t fire. So lightwindow isn’t reïnitialized with the new objects.[/quote:af04d3db20]

This got me thinking and I opened the lightwindow.js source code… At the very bottom you’ll see :
[code:1:af04d3db20]Event.observe(window, ‘load’, lightwindowInit, false);

//
// Set up all of our links
//
var myLightWindow = null;
function lightwindowInit() {
myLightWindow = new lightwindow();
}[/code:1:af04d3db20]

[b:af04d3db20]Tataa!! Solution ![/b:af04d3db20]
So I combined the two et voila!

So… my new JavaScript looks like this: ( note the ” [b:af04d3db20]onComplete:function(){ lightwindowInit(); } [/b:af04d3db20]” )
[code:1:af04d3db20] new Ajax.Updater
(
‘step0_result’, url_ajax_step0 + ‘action=showkaartafmetingen&cat_id=’+ escape(cat_id),
{ onComplete:function(){ lightwindowInit(); } }
);[/code:1:af04d3db20]

And my code in the page is :
[code:1:af04d3db20]a class=”lightwindow page-options” href=”kies_tussenscherm.php” title=”Kies dit formaat” params=”lightwindow_type=external,lightwindow_width=600″ rel=”nofollow”[/code:1:af04d3db20]

Solution crosslinked at
http://stickmanlabs.com/2007/07/10/lightwindow-v20-released/#comment-1182

Share this:

Leave a Reply

Your email address will not be published. Required fields are marked *