jQuery UI tabs with ajax and jQuery slider inside. 95% completed

Question

Hello there code gurus and jQuery experts!

--------------Edited----------------

Ok, so as Kevin B pointed out, what I want to achieve won't work, because tab content tags can not be outside the #tab div, then again, I have built jQuery UI tabs with an older jQuery Ui version where it did work! Check it here: http://raimondsblums.lv/freelance/ajax4/

The problem is that I have absolutely no idea how to apply ajax to this example!

--------------Edit ends----------------

Here is what I have: http://raimondsblums.lv/freelance/ajax2/ It took a lot of time for me to make those sliders work when pulled with ajax, since my knowledge about javascript is quite similar to my knowledge about brain surgery, which is none. Ok, maybe not that bad!

So everything's working fine except for one part - when using axaj with jQuery UI tabs, those DIV's with class="ui-tabs-panel" are beign generated. And they are generated right after tab buttons, so currently it looks like this:

<div id="tabs">
  <ul>
    <li><a href="projekts0.html">Preloaded</a></li>
    <li><a href="projekts1.html">Tab 1</a></li>
    <li><a href="projekts2.html">Tab 2</a></li>
  </ul>
  <div id="ui-tabs-1" class="ui-tabs-panel"><div class="flexslider"></div></div>
  <div id="ui-tabs-2" class="ui-tabs-panel"><div class="flexslider"></div></div>
  <div id="ui-tabs-3" class="ui-tabs-panel">unrelated content, just for testing if it works</div>
</div>

What I want it to look like is this:

<div class="bildiic">
  <div id="ui-tabs-1" class="ui-tabs-panel"><div class="flexslider"></div></div>
  <div id="ui-tabs-2" class="ui-tabs-panel"><div class="flexslider"></div></div>
  <div id="ui-tabs-3" class="ui-tabs-panel">unrelated content, just for testing if it works</div>
</div>

<div id="tabs">
  <ul>
    <li><a href="projekts0.html">Preloaded</a></li>
    <li><a href="projekts1.html">Tab 1</a></li>
    <li><a href="projekts2.html">Tab 2</a></li>
  </ul>
</div>

What I have figured out is that this function really works (it's in the source and I have comented it out) and places those ui-tabs-panel's in a specific tag:

<script>
$(function() {
  $('.ui-tabs-panel').appendTo('.bildiic');
});
</script>

But this screws up the jQuery Ui tab functionality, and tabs stop working...

At this point my knowledge ends, I have no idea how to fix these functions to make it all work!

Help!

Answer 1

It isn't going to work this way due to how the tabs widget was built. It isn't designed to have panels that exist outside of the tabs widget. You may be better off building something custom that looks and acts like tabs, but does not rely on the tabs widget.

These are the lines from the jquery ui tabs widget that prevent you from doing what you are trying to do. ( the self.element.find part ).

// inline tab
if ( fragmentId.test( href ) ) {
    self.panels = self.panels.add( self.element.find( self._sanitizeSelector( href ) ) );

panels must be children of the tabs container.

UPDATE
Here is a workaround:

$("#tabs").tabs({
    add: function(e, ui){
        $(".bildiic").append(ui.panel);
    }
});

Every time a tab is added, it will be appended to the appropriate div. I have not tested this, but in theory it should work. Let me know how it works for you.