Lightbox from tab(Ajax Tabs Content)

[narokam]

1) Script Title:
Ajax Tabs Content
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...tent/index.htm
3) Describe problem:

Hello, is there any way to use other javascript/ajax functions and scripts from tabs?
For example, i'm loading tab 2 via Ajax Tabs Content script, and in tab 2 i need to use Lightbox. even when i load lightbox from main html file, or from tabbed file no way to use that. is there any way?
i also have tried to load lightbox.js and lightbox.css as external .js and .css files using loadobjs('js/lightbox.css', 'js/lightbox.js') but no succes.
What can we do for this?
Thank you!

[cheeko]

Hi,
i am new to dynamic drive. I have had the same problem as you and it doesn't look like there is an easy fix.
when you receive data from a ajax request it comes back as plain text and your browser renders any html tags but any javascript will not initiate as its just text.
the whole point of ajax is to update part of your page without reloading the whole page so the ajax fetched data will not run past the http request the page originally loaded.

Ive been looking for some way to re-init javascript from ajax requested data for a week now and im at my wits end.

One way to do it is to use the eval() function just after your ajax request but this is very messy.

I gave up trying to use light box this way and now im trying to get google widgets to work when called via ajax.

I know that your problem will be fixed if you use iframes but then there's the height issue that iframes have.

So im sorry to say this is not an easy problem to fix and if you find a way please post it so i call see how its done.

[cheeko]

You could also put that content as the default for your tabs div.
then use the #default rel attribute instead of "div id and ajax" to show it

<ul id="countrytabs" class="shadetabs">
<li><a href="#" class="selected" rel="#default">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>


Try using #iframe in the rel attribute instead of your div id also it will work that way but iframes in my opinion are rather useless and there height cannot be set dynamically.

read the notes from the ajax tabs page
http://www.dynamicdrive.com/dynamici...tent/index.htm