So I’ve been beating my head around this problem for the last couple of days. For a project I’m working on, I have a series of modal windows that pop up using the amazing Shadowbox library. I’m using a custom ajax player for shadowbox that uses prototype to load in a new page into the DOM and display it as a shadowbox. Everything was going great until, I started trying to run javascript from inside my modal window.

See, javascript that gets added to the DOM after a page is loaded does not get run. You don’t even seem to be able to reference functions that are loaded after the initial document load. So I needed a solution so that my AJAX calls from within the modal windows would function. After two days of thinking this out, I came up with a very simple low tech solution:

1
2
3
4
5
6
7
8
9
10
11

function parse_new () {
     var shadowbox = document.getElementById('shadowbox');
     var scripts = new Array();
     scripts = shadowbox.getElementsByTagName('script');
 
     for(i=0; i < scripts.length; i++) {
          if(scripts[i].getAttribute('type') == 'text/javascript') {
          eval(scripts[i].innerHTML);
          }
     }
}

Basically whats going on here, is that after I load my shadbowbox, I get a reference to that element, search for all the script tags inside it with type = text/javascript, and evaluate it. Hope this helps someone out!