Content For tab Using ajax

In the liferay It is going to render whole page whne we click on the tab which is liferay:ui tabs.Without refershing whole page we can get that content using Ajax call on the click of the tab.


Jsp Code.

<portlet:resourceURL var="getTabContentURL" id="getTabContentURL"></portlet:resourceURL>

<div class="ForumTabsContainer">
            <div class="ForumTabs">
                <ul>
                    <li>
                        <span class="ForumTabSelected TabFirst"><a href="#" onclick="getTabContent('<%=getTabContentURL%>','tabA')">Tab A</a></span></li>
                    <li>
                        <span class="ForumTab"><a href="#" onclick="getTabContent('<%=getTabContentURL%>','tabB')">Tab B</a></span></li>
                    <li>
                        <span class="ForumTab"><a href="#" onclick="getTabContent('<%=getTabContentURL%>','tabC')">Tab C</a></span></li>
                </ul>
            </div>
</div>
<div id="tabContent" style="margin-top: 30px;">
    U have selected Tab tabA
</div>

On clicking of the tab called a js function getTabContent.In this we have passed the resource url and the tabname a the parameter. From the js we have made the ajax call which is going to fetch the data for the tab using the ajax method.


Js Code.

<script src="/ajax-tab-portlet/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
function getTabContent(getTabContentURL,selectedTab){
    alert(getTabContentURL);
    alert(selectedTab);
    $.ajax({
        url :getTabContentURL,            
          data: {"selectedTab":selectedTab},
          type: "GET",
          dataType: "text",
           success: function(data) {
               $("#tabContent").html(data);
          }
         });
}

</script>

Controller Code.
In the controller we have return the value we want to put the div below the tab.

public class AjaxTabPortlet extends MVCPortlet{
    public void serveResource(ResourceRequest request, ResourceResponse response){
        String selectedTab = request.getParameter("selectedTab");
        String responseValue = "U have selected Tab "+selectedTab;
        System.out.println("selectedTab--->>>"+selectedTab);
        System.out.println("responseValue--->>>"+responseValue);
        try {
            response.getWriter().write(responseValue);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
}

Css Code.

<style>
.ForumTabs span {
    border-right: 1px solid #FFFFFF;
    font-size: 14px;
    padding: 7px 20px;
}

.ForumTab {
    background: url("/ajax-tab-portlet/images/tabBack.png") repeat-x scroll 0 0 transparent;
}

.TabFirst {
    border-top-left-radius: 7px;
}

.ForumTabSelected {
    background: url("/ajax-tab-portlet/images/tabBack.png") repeat-x scroll 0 0 transparent;
}

.ForumTabsContainer {
    padding-top: 20px;
}

.ForumTabs ul {
    margin: 0;
}

.ForumTabs li {
    float: left;
    list-style: none outside none;
}

.ForumTabs span {
    border-right: 1px solid #FFFFFF;
    font-size: 14px;
    padding: 7px 20px;
}

.TabFirst {
    border-top-left-radius: 7px;
}

.ForumTabSelected a {
    font-weight: bold;
}

.ForumTabs a, .ForumTabs a:visited {
    color: #FFFFFF;
    text-decoration: none;
}


</style>