Tab won't load on ajax page!
Hi,
I'm developing an application which calling external php using $.ajax
(..) calls. Inside the php page, I have tabs. Unfortunately, the tab
wont display as required but it display as normal list, instead! Here
is the snippet...
...in calling page
$.ajax({
type: "GET",
url: "a.php",
data: { srch: search},
dataType: "html",
error: function(){
$("#error").html("Oops, there is error.");
},
success: function(data){
$("#main").html(data);
}
});
....and in a.php page
<script type="text/javascript">
$(document).ready(function() {
$('#tabs > ul').tabs();
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
<li><a href="#tabs-4">Four</a></li>
<li><a href="#tabs-5">Five</a></li>
</ul>
<div id="tabs-1">one</div>
<div id="tabs-2">two</div>
<div id="tabs-3">three</div>
<div id="tabs-4">four</div>
<div id="tabs-5">five</div>
</div>
... it seems ok but the tab wont display. What went wrong? please
help!
TQ.
-aze