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>

Make a ajax call using serve resource method in liferay

In liferay the ajax call has been done using the serve resource.

Example to add a Data on button call with the help of the ajax in liferay.

In the jsp

Created a  resource url and a form.
<portlet:resourceURL var="addToDo" id="addToDo"></portlet:resourceURL>
<form>
<input type="text" name="toDo" id="toDo">
<button name="Add" type="button" onclick="addToDo('<%=addToDo%>')">Add</button>
<div id="toDoList">


</div>
</form>

In the above code when click on the add button we have called  a java script method "addToDo" with the resource url as the parameter.

Js Code :

<script type="text/javascript">
function addToDo(addToDo){
    var todo =document.getElementById('toDo').value;
    $.ajax({
        url :addToDo,            
          data: {"todo":todo,"CMD":"addToDo"},
          type: "GET",
          dataType: "text",
        success: function(data) {              
              $("#toDoList").html(data);
        }
    });
}

 </script>

when click on the add button it calls the js function  addToDo in which we have passes resource url as the parameter.Fetch the value put into the text box .

In the controller.
By default it is going to call serve resource mthod of the controller.

public void serveResource(ResourceRequest request, ResourceResponse response){
        if(request.getParameter("CMD").equals("addToDo")){
            user_todo userToDo = new user_todoImpl();
            userToDo.setUserId(userId);
            try {
                userToDo.setTodoId(CounterLocalServiceUtil.increment());
                userToDo.setToDoName(request.getParameter("todo"));
                user_todoLocalServiceUtil.adduser_todo(userToDo);
                       
            }
            catch (SystemException e) {
                e.printStackTrace();
            }
   
        }
    }

It's going to add the todo list into the custom table made for making the todo entries.