Tiles Framework : refresh only body content

Question

we have a Tiles layout page having Header, Menu, Body and Footer. In this layout whenever user does some action in the Menu lists, the whole Layout (Incl Header, menu and footer) is refreshing. I want header,menu, footer to be static, and only body part should get updated.

Is there any way to prevent the refresh of the Header, menu and Footer and update only Body content on the menu click which can be implemented using Tiles?

Answer 1

To do this you need to use ajax calls. The general procedure would be:

1.- Create and define a tile which will be your base, composed with your header, body and footer, which will look like this:

<div id='headerTile'>whatever goes here...</div> <!--this is baseHeader.jsp-->
<div id='bodyTile'>whatever goes here....</div>  <!--this is baseBody.jsp-->
<div id='footerTile'>whatever goes here...</div>  <!--this is baseFooter.jsp-->

let's consider each of those divs to be one tile in your definition:

<definition name="layoutBase" path="/whateverPathItIs/layoutBase.jsp">
    <put name="header" value="/whateverPathItIs/baseHeader.jsp"/>
<put name="body" value="/whateverPathItIs/baseBody.jsp" />
<put name="footer" value="/whateverPathItIs/baseFooter.jsp" />         
</definition>

2.- Create and define all the different jsp which will replace your body content, please remember that this jsp must contain only the body elements. Let's say you have 2 other body contents ready to be shown in your page, each one will be a tile:

<div id='bodyContent1'>whatever goes here again...</div> <!--this is content1.jsp-->

<div id='bodyContent2'>whatever goes here again 2</div> <!--this is content2.jsp-->

3.- At this point you have both the base jsp tile and 2 other jsp which contain the body content. Now we need a struts action which will act as a service, returning the corresponding body depending on the ajax request. Do this as a normal action, and at the mapping.findForward method in the end, return the jsp which contains your body. You can either create one action for each body content or a single DispatchAction which contains a method for each body.Second option is cleaner, and the action would be defined like this:

<action path="/bodySwitcher" 
        type="BodySwitcherAction"
        parameter="method"
        scope="request"
        >
    <forward name="content1" path="/pathToJsp/content1.jsp"/>
    <forward name="content2" path="/pathToJsp/content2.jsp"/>
</action>

4.- To switch content, use javascript or jquery to make an ajax call and load the returned jsp into your body. This is an example of the method which would switch the content in jQuery, using .load() as an ajax call:

function switchContent(whichContent){
     $('#bodyTile').children().remove();
     $('#bodyTile').load("/pathToYourApp/bodySwitcher.do?method="+whichContent);
}

Don't get discouraged by how long the answer is, I'm just trying to explain cleanly. This is actually pretty easy to do, and question is more jquery/javascript related than anything else, the only detail is how to use a struts action as a service. Good luck.