Facebox with other jquery in it

Question

So I have facebox setup and it works. when I load an external page with a tab based navigation (JQuery too) the modal works but the nav doesnt. If it isnt clear I actually want the tabs to be inside the lightbox. And I also have php/mysql running inside the lightbox if that can change anything. Thanks for any help.

This is the original modal call

<link href="facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="facebox/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    $('a[rel*=facebox]').facebox()
});

This is the script in the page that the modal box calls up

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#tabs').tabs();
        });
</script>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Informations</a></li>
        <li><a href="#tabs-2">Factures en attente</a></li>
        <li><a href="#tabs-3">Marché en cours</a></li>
    </ul>
<div id="tabs-1"> one</div>
<div id="tabs-2"> two</div>
<div id="tabs-3">three</div>

Answer 1

Not enough details here for me.. Where is the modal markup/call? Where are your containers that the tabs reference?

See the source for the example here:

http://docs.jquery.com/UI/Tabs

If you aren't using containers, the tabs have nothing to interact with and may appear to not work.

Edit:

According to the official doc, this should work, after loading the jquery:

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

Have you tried the exact example to see if it works? If that doesn't work, Facebox may be interfering somehow. Try reducing it to the simplest form without a lot going on and see if it works, then start slowly adding things.

Answer 2

Can't reproduce. Made a simple demo here http://jsbin.com/iposi3/2 which loads http://jsbin.com/uwoxe/2. Note it is vital that the loaded remote page isn't a full-blown-html page, so no html, head, body tags or the like else it will fail completly. Only a "html-fragment" as the one you have shown.

To view the code use http://jsbin.com/iposi3/2/edit and http://jsbin.com/uwoxe/2/edit

Works just fine in my Opera. Although of course the facebox is too small to show the tabs nicely with default settings.

---

To your problem I recall (check my post on that) that jQuery sometimes strips the script tags from remote loaded content. But that seems to apply only when $.load is used which FaceBox doesn't (it uses $.get for remote content).

Which browser do you experience problems in? If it is IE it could be that IE throws "Permission Denied" errors when jQuery tries to inject the script tags from the remote content. Did you check your browsers error console?