I have a problem. I'm trying to load tabs inside tabs. The problem is that the tabs inside the tabs is loaded using the .load() function. So each tab is loaded AJAX wise. To illustrate this, I took a screenshot as that explains my problem better.

So these tabs are taken from the page (say) page.php. These tabs generate fine. When "Fastest laps" is pressed, this code is generated on page.php:

2. function updateFastestLaps() {
3.  $("#tabFastestLaps").load("include_my_session_race_fastestlaps.php?season_id="+season_id+"&division_id="+division_id+"&track_id="+track_id+"&race_type="+race_type+"&week_id="+week_id+"&lap_id="+lap,
4. function(){
5. alert("loading tabs");
6. $("#tabs_fastestlaps").tabs();
7. alert("loaded tabs");
8. });

On this include page there is only the following:

2. <link rel="stylesheet" href="/include/jquery-ui-themeroller.css" type="text/css" media="screen">
3. 
   
4. <div id="tabs_fastestlaps">
5.     <ul id="tabs_fastestlaps_list">
6.         <li class="ui-tabs-nav-item"><a href="#tabFLOverall"><span>Overall</span></a></li>
7.         <li class="ui-tabs-nav-item"><a href="#tabFLDrivers"><span>Drivers</span></a></li>
8.         <li class="ui-tabs-nav-item"><a href="#tabFLSector1"><span>Sector 1</span></a></li>
9.         <li class="ui-tabs-nav-item"><a href="#tabFLSector2"><span>Sector 2</span></a></li>
10.         <li class="ui-tabs-nav-item"><a href="#tabFLSector3"><span>Sector 3</span></a></li>
11.     </ul>
12.     
13.     <div id="tabFLOverall">Top 20 list of fastest laps</div>
14.     <div id="tabFLDrivers">Grouped by drivers</div>
15.     <div id="tabFLSector1">Fastest sector 1 times</div>
16.     <div id="tabFLSector2">Fastest sector 2 times</div>
17.     <div id="tabFLSector3">Fastest sector 3 times</div>
18. </div>

What am I doing wrong? The alert("loading tabs"); displays just fine, after that, I get nothing. I've tried to find some ways to debug the code, but it's pretty hard. The console in Chrome doesn't display any error either.

Thanks for your help!