JQuery UI - Tabs and Ajax
Hi Guys,
I have tabbed JSP app that need to load pages via ajax.
User selects year and moth from drop down HTML menu and presses Go and then it should load data.
The Data is loaded by ajax but I cannot get it show on a tab. below is the code.
Thanks for help
HTML file
- <html>
<head>
<title>
<? echo $head['title']; ?></title>
<link rel="stylesheet" href="<?=base_url()?>css/juitabs.css" type="text/css" media="screen, projection" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//When page loads...
$("#tabcontainer div").hide(); //Hide all content
$("ul.mytabs li:first").addClass("active").show(); //Activate first tab
$("#tabcontainer div:first").show(); //Show first tab content
//On Click Event
$("ul.mytabs li").click(function() {
$("ul.mytabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$("#tabcontainer div").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
</script>
</head>
<body>
<?php
/* foreach ($body as $key => $value) {
if (!(is_array($value))) {
echo $value;
}
} */
?>
<div id="tabcontainer">
<ul class="mytabs">
<li><a href="#tabs-1">Tab I</a></li>
<li><a href="#tabs-2">Tab II</a></li>
<li><a href="#tabs-3">Tab III</a></li>
</ul>
<div id="tabs-1">
<h3>Tab 1</h3>
<p>Some content</p>
</div>
<div id="tabs-2">
<h3>Tab 2</h3>
<p>Some content</p>
</div>
<div id="tabs-3">
</div>
</div>
</body>
</html>
and JS code called when there is a click
- $.post("/LAM/report", {start:text,end:text2, selectedyear:year}, function(data){
- //alert("Some data:"+data);
- $("div#tab3").html(data);
- });
note that I have made minimal code for illustration so if anything is missing please tell me and I'll post