Updating IFRAME src while embedded in Thickbox

Question

Hi all, hopefully a simple question here.

I'm running a Wordpress blog that has a bunch of links to different cities, which point to a location on a Google map.

My current setup involves having an iframe for each link, and that iframe pops up in a thickbox when it is clicked.

Now that my list of cities has grown, I have many, many iframes being pre-loaded behind the scenes while the page is loading....and this is an issue.

My thought was to just have each link update the src of the iframe, but I think my thickbox is throwing that off.

This was the javascript code I was trying to use to update the link..

document.getElementById('map_frame').src = new_url;

And here would be an associated link that would trigger this...

<li class="sub_li">
  <a href="#TB_inlinemodalContent?height=700&width=500&inlineId=map_frame" onclick="switch_map('bregenz');" title="Bregenz, Austria" class="thickbox">bregenz</a>
</li>

Where, new_url is populated via a large switch statement (and by using trace debugging I know that at least that works).

However, when the lightbox pops up, the map that is shown never changes...it is simply the initial one that I pre-load.

Answer 1

Possibly the thickbox removes your onclick handler, you should instead of that, add code to add your click handler to the links on another context, like:

<script type="text/javascript">
$(function() { //when the document is ready
  $('a.thickbox').bind('click',function() { //bind a click handler all the a elements with thickbox class
    switch_map($(this).attr("title")); //execute your function
  });
});
</script>

And instead of getting the title attribute, you could add a new one, named "value" or "city", and put there the value you want to pass to the switch_map function.. I'm assuming you can use jQuery to do this.