title: jQuery UI tabs with ajax and jQuery slider inside. 95% completed
body: <p>Hello there code gurus and jQuery experts!</p>
  
  <p>--------------Edited----------------</p>
  
  <p>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: <a href="http://raimondsblums.lv/freelance/ajax4/" rel="nofollow">http://raimondsblums.lv/freelance/ajax4/</a></p>
  
  <p>The problem is that I have absolutely no idea how to apply ajax to this example! </p>
  
  <p>--------------Edit ends----------------</p>
  
  <p>Here is what I have: <a href="http://raimondsblums.lv/freelance/ajax2/" rel="nofollow">http://raimondsblums.lv/freelance/ajax2/</a>
  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!</p>
  
  <p>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 <strong>currently it looks like this:</strong></p>
  
  <pre><code>&lt;div id="tabs"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="projekts0.html"&gt;Preloaded&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="projekts1.html"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="projekts2.html"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="ui-tabs-1" class="ui-tabs-panel"&gt;&lt;div class="flexslider"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div id="ui-tabs-2" class="ui-tabs-panel"&gt;&lt;div class="flexslider"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div id="ui-tabs-3" class="ui-tabs-panel"&gt;unrelated content, just for testing if it works&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>What I want it to look like is this:</strong></p>
  
  <pre><code>&lt;div class="bildiic"&gt;
    &lt;div id="ui-tabs-1" class="ui-tabs-panel"&gt;&lt;div class="flexslider"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div id="ui-tabs-2" class="ui-tabs-panel"&gt;&lt;div class="flexslider"&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div id="ui-tabs-3" class="ui-tabs-panel"&gt;unrelated content, just for testing if it works&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="tabs"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="projekts0.html"&gt;Preloaded&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="projekts1.html"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="projekts2.html"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
    $('.ui-tabs-panel').appendTo('.bildiic');
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>But this screws up the jQuery Ui tab functionality, and tabs stop working...</p>
  
  <p>At this point my knowledge ends, I have no idea how to fix these functions to make it all work!</p>
  
  <p>Help!</p>