Michele Michele - 10 days ago 5
Javascript Question

Load correctly jQuery UI tabs through AJAX

I have some tabs on a web page in my website using jQuery UI and I want to load them dynamically in another web page on the same domain. I've used the AJAX

load()
function, by clicking on some elements, but when I click on them I get what I am not really expecting to get, or so I get only the html structure without any visual jQuery tab, although I've loaded correctly all the needed and indispensable links in the head; maybe I can explain it better with this example:
( in this example all I want to do is to load some div elements from a page A into a page B, obviously all this will take place just in the page B )

page A



<div id="tabs" ui-tabs>
<ul ui-tabs-nav>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li><a href="#fragment-3">Three</a></li>
</ul>
<div id="fragment-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit
</div>
</div>


Page B

<body>
<div id="box">

</div>
<span id="button" style="cursor:pointer;">button</span>
<script>
$(document).ready(function(){
$("#button").click(function(){
$("#box").load("paginaA.html #tabs");
});
});
</script>
</body>


So, the tabs with id="tabs" should appear just right in the div with the id="box". Does someone explain me why this shouldn't happen to me?
I apologize for my bad-English!

I have these two pages and I want simply to let appear dynamically some divs from a page into another by clicking on some links; now I've just created a jsFiddle page which is linking to another jsFiddle page like as my aim, so it has the same purpose. You will see that the jQuery UI tabs won't appear properly and that's my actual problem. Here the links are: jsFiddle this is where the div is and it has id="boxDrag", and jsFiddle is where there's the div with id="boxTab" in which I would like to make the "boxDrag" appear into, by clicking on the "click here" button. So these two pages simulate the two pages on my website.

Answer
( "#box" ).load( "paginaA.html #tabs", function() { $(".tabs").tabs({}); })