JQuery UI - Tabs and Ajax

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

  1. <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

  1. $.post("/LAM/report", {start:text,end:text2, selectedyear:year}, function(data){
  2.             //alert("Some data:"+data);
  3.             $("div#tab3").html(data);
  4.         });
note that I have made minimal code for illustration so if anything is missing please tell me and I'll post