How to make Displaytag ajax enabled using DWR?

Mischa Dasberg

Displaytag is an open source suite of custom tags with which you can easily display a collection of Objects as a table including direct support for paging and sorting. Normally selecting a new page, or sorting the tables leads to a complete page-refresh. It is more user-friendly to refresh only the data in the table using Ajax technology, however Displaytag doesn't offer this out-of-the-box. But we can of course try to add support for this using one of the many Ajax frameworks that are currently available.

A non ajax enabled Displaytag would do a request to a controller for every action such as a sorting or selecting a next page. This would result in a complete page refresh (step 1-8 ). When we Ajax enable the Displaytag we skip the page refresh and only refresh a specific piece of the page using an exposed service which provides the updated HTML fragment (step 1a-8a).

flow

In the example I am going to use the following technologies:

The senario is as follows: We want to display episodes in a table. We want to do this in an Ajax way by using DWR. But where do we start?

Well, first of all we create a domain object called Episode.

public class Episode {
   long id;
   String show;
   String name;
   String episode;
   String airDate;
....
}

Next we create a repository.

public class EpisodeRepository extends HibernateDaoSupport {

    public List getAllEpisodes(int firstResult, int maxResults, String orderBy,
    boolean ascending) {
        Criteria criteria = getSession().createCriteria(Episode.class)
            .setFirstResult(firstResult)
	    .setMaxResults(maxResults)
	    .addOrder(ascending ? Order.asc(orderBy) : Order.desc(orderBy));
	    return criteria.list();
	}

    public int getNumberOfEpisodes() {
        Criteria criteria = getSession().createCriteria(Episode.class);
	criteria.setProjection(Projections.count("id"));
	return (Integer)criteria.uniqueResult();		
    }
}

And a Jsp containing the Displaytag for presenting the collection of Episodes.
<display:table id="ep" name="eps" sort="external" requestURI="replaceURI" pagesize="30" partialList="true" size="${nrOfEps}">
    <display:setProperty name="basic.empty.showtable" value="true" />
    <display:column title="Show" property="show" sortable="true" sortName="show" />
    <display:column title="Name" property="name" sortable="true" sortName="name" />
    <display:column class="Episode" property="episode" sortable="true" sortName="episode" />
    <display:column title="Airdate" property="airDate" sortable="true" sortName="airDate" />
</display:table>

Note that I use replaceURI as requestURI. This is very important because we are going to replace this with a call to a javascript method. Displaytag creates links like <a href="repaceURI?d-2332-o=1...."> and this should be replaced by <a href="javascript:update('d-2332-o=1...')> so that we the links will be Ajax enabled too. Unfortunatly this is not the only thing that we need to update. We need to update the range we are displaying, the page we are currently on and how the data is sorted.

So how do we do that?
Well, we need to expose a service using DWR. DWR is an Ajax toolkit which make it possible to expose services which can then be called from JavaScript. I created an abstract generic class so that you can use it to enable any service you like. The abstract class contains the following method:

public abstract class AbstractExposedDisplayTagService implements InitializingBean {

    public void afterPropertiesSet() throws Exception {
        ....
    }

    public String findAllObjects(String criteria) {
        WebContext wctx = WebContextFactory.get();
	HttpServletRequest request = wctx.getHttpServletRequest();

	// split results and set values;
	int maxResults = Integer.parseInt(getCriterionValue(criteria, "maxResults", DEFAULT_MAXIMUM_RESULTS));
	int page = Integer.parseInt(getCriterionValue(criteria, displayTagPage, "1"));
	boolean ascending = Integer.parseInt(getCriterionValue(criteria, displayTagSortOrder, "1")) == 1 ? true : false;
	String orderBy = getCriterionValue(criteria, displayTagOrderBy, "id");
	int firstResult = (page - 1) * maxResults;
	int numberOfObjects = getNumberOfObjects();

	// set the episodes on the request so dwr can reload the jsp part.
	request.setAttribute(getObjectsName(), getObjects(firstResult, maxResults, orderBy, ascending));
	request.setAttribute(getNumberOfObjectsName(), numberOfObjects);
	try {
	    String html = wctx.forwardToString(viewFragment);
	    html = DisplayTagReplacementUtil.updatePagingHtml(html, page, maxResults, numberOfObjects, displayTagPage);
	    html = DisplayTagReplacementUtil.updateSortOrderHtml(html, ascending, displayTagSortOrder);
	    html = DisplayTagReplacementUtil.updateHtmlLinks(html);
	    return html;
	} catch (ServletException e) {
	    return "";
	} catch (IOException e) {
	    return "";
	}
}
}

And here is the implementation.

public class EpisodeService extends AbstractExposedDisplayTagService {
	private EpisodeRepository episodeRepository;
	
	@Override
	public int getNumberOfObjects() {
		return episodeRepository.getNumberOfEpisodes();
	}

	@Override
	public String getNumberOfObjectsName() {
		return "numberOfEpisodes";
	}

	@Override
	public List getObjects(int firstResult, int maxResults, String orderBy, boolean ascending) {
		return episodeRepository.getAllEpisodes(firstResult, maxResults, orderBy, ascending);
	}

	@Override
	public String getObjectsName() {
		return "episodes";
	}

	public void setEpisodeRepository(EpisodeRepository episodeRepository) {
		this.episodeRepository = episodeRepository;
	}
}

Now you see that the findAllObjects method calls 3 static update methods on the DisplayTagReplacementUtil class.
These are responsible for the actual Ajax enabling. They use regular expressions to update the links, sorting etc..

Finally we need to add some JavaScript to be able to call the exposed service methods.
The following piece of code should be in the head of the jsp , in which you include the jsp containing the displaytag shown above in.
<script type='text/javascript' src='<c:url value="/dwr/interface/EpisodeService.js"/>'></script>
<script type='text/javascript' src='<c:url value="/dwr/engine.js"/>'></script>
<script type='text/javascript' src='<c:url value="/dwr/util.js"/>'></script>
<link rel="stylesheet" type="text/css" href='<c:url value="/css/displaytag.css"/>' />

and the javascript:
<script type="text/javascript">
function update(criteria) {
EpisodeService.findAllObjects(criteria, function(data) {
dwr.util.setValue("displayTable", data, { escapeHtml:false });
});
}
update("");
</script>

It is now a simple matter of extending the abstract class and you have Ajax enabled your Displaytag .
I have attached the example project here so you can look into the code yourself.

Comments (24)

  1. [...] How to make Displaytag ajax enabled using DWR? By Mischa Dasberg update(""); </script>. It is now a simple matter of extending the abstract class and you have Ajax enabled your Displaytag . I have attached the example project here so you can look into the code yourself. Xebia Blog - http://blog.xebia.com [...]

  2. Balaji D Loganathan - Reply

    December 11, 2007 at 4:22 am

    Very well written and useful.
    Good one Mischa.

  3. Bart Guijt - Reply

    December 11, 2007 at 10:27 am

    Well done, Mischa! I like the illustration.

  4. Krish - Reply

    December 26, 2007 at 1:08 pm

    hi,

    liked the article... i was wondering if you can provide a struts based path.. I am new to struts and my application is written in struts. Cant change the arch 🙁

    Thanks,
    Krish

  5. Krishna - Reply

    February 13, 2008 at 4:13 pm

    Where is the EpisodeService.js and what does it contain?

    U said exposing the class functionality (EpisodeService.findAllObjects(criteria, function(data)). How to do that?

  6. Mischa Dasberg - Reply

    February 14, 2008 at 11:05 am

    If you look at the attached project and look in the file displaytag-service.xml you see the episodeService bean definition. You also see a dwr:remote block.
    By exposing the Bean using DWR, it will create a Javascript file EpisodeService.js. So Javascript can access the exposed Service.

  7. Ana - Reply

    March 10, 2008 at 10:16 pm

    Amazing article! Just what I was looking for. Thanks!

  8. Alan - Reply

    May 28, 2008 at 2:15 pm

    I do not see where
    public void setViewFragment(String viewFragment)
    is being called? What is expected to be passed in the viewFragment?

  9. amurray - Reply

    May 28, 2008 at 4:21 pm

    In the sample code I do not see where

    public void setViewFragment(String viewFragment) {
    this.viewFragment = viewFragment;
    }

    is being called. What is the viewFragment? Is it the entire table before displayTag has processed it or after displayTag processed it?

  10. Mischa Dasberg - Reply

    May 28, 2008 at 9:10 pm

    viewFragment is injected in the springContext.
    It represents the part that will be rerendered.

    If you look in displaytag-service.xml you will see that I define the following bean.

    <bean id="episodeService" class="com.xebia.displaytag.service.EpisodeService">
    <property name="episodeRepository" ref="episodeRepository"/>
    <property name="viewFragment" value="/episodes.htm"/>
    <property name="tableId" value="episode"/>
    <dwr:remote javascript="EpisodeService"/>
    </bean>

    As you can see I the viewFragment that is injected is /episodes.htm which points to episodes.jsp (see viewResolver)

  11. Rahul - Reply

    June 5, 2008 at 11:17 am

    Hi,

    Is it required to have two files , episode.jsp and index.jsp?

    Can't we just include/manually copy the episode.jsp in the index.jsp...

    What will be the effects....

    Anyways, very nice article..

    rahul

  12. amurray - Reply

    June 6, 2008 at 5:22 pm

    Mischa thanks for the clarification on the viewFragment. I have made a lot of headway since then. The question that I have now is how do you handle exports with this approach? The link:

    javascript:updateTableL4('d-5302-e=2&6578706f7274=1') is not sufficient to cause the save as dialog to open.

    Thanks for your help,
    Alan

  13. ck - Reply

    July 2, 2008 at 6:46 am

    really nice, but i don't know how to make it work, any more easier way and less codes to do it?

  14. Mischa Dasberg - Reply

    July 6, 2008 at 9:03 pm

    Hi Alan,

    I haven't implemented that, because I had multiple displaytags on one page and I wanted to export all that data in one export. Unfortunately you cannot do that, so I created a custom action that exported the data to excel using jexcelapi.

    But of course you can implement it. It should not be that hard as I have already done it for sorting etc.

  15. ppl - Reply

    August 12, 2008 at 1:52 pm

    Hi Mischa

    Very good example of ajax and displaytag. I got your example working fine but when I extended it I found that the criteria keep being null so my links broke. Any ideas?

    Thanks
    PPL

  16. Sarav - Reply

    January 19, 2009 at 5:54 pm

    Excellent work.. I learnt a new Idea.. going to implement in my project.. Great work. Appreciate your knowledge sharing.. thank you once again..

  17. kilicool - Reply

    June 3, 2010 at 2:28 pm

    Hello,

    Excellent example, thanks a lot !

    I saw just a bug, when you order ASC or DESC a column and go next page (or previous page), the ordering is lost !

    Can you fix it ?

    Regards !

  18. Jean - Reply

    June 30, 2010 at 10:47 am

    Hi,

    I'm using Dwr and i get this error: a popup show "The specified call count is not a number"
    Any ideas?
    Thx for your help

  19. Nikunj Mulani - Reply

    January 29, 2011 at 2:36 pm

    No need to do much more you just write following code in "displaytag-properties"

    paging.banner.page.link={0}

    You can call ajax using AjaxCall method

    Enjoy!!!!
    Keep smiling!!!

  20. Krishna - Reply

    September 20, 2011 at 11:12 am

    Appreciate your knowledge sharing.. thank you

  21. XCOSMOS - Reply

    September 28, 2011 at 5:55 am

    Your ideas are great. I need the full example source of above article. Where do I download?

  22. Mischa Dasberg - Reply

    September 28, 2011 at 8:25 am

    You can download the sample project here: http://blog.xebia.com/wp-content/uploads/2007/12/Displaytag+dwr.zip

  23. reddy - Reply

    October 25, 2011 at 1:19 am

    Can you please send me complete source code. I am planning to implement similar functionality using struts and display Tag.. I hope I will get answer AEAP. Nice article.
    Thanks,
    Reddy

  24. Lio - Reply

    March 24, 2012 at 10:30 pm

    I have the problems with that example, i have the same implementation but error in the deployment runtime, my web.xml is:

    app-example-dwr

    javax.servlet.jsp.jstl.fmt.localizationContext
    ApplicationResources


    javax.servlet.jsp.jstl.fmt.fallbackLocale
    en

    contextConfigLocation

    classpath*:/**/application-datasource.xml
    classpath*:/**/application-platform-hibernate.xml
    classpath*:/**/application-security-hibernate.xml
    classpath*:/**/application-rules-hibernate.xml
    classpath*:/**/application-platform-service.xml

    charsetFilter
    org.springframework.web.filter.CharacterEncodingFilter

    encoding
    UTF-8

    forceEncoding
    true

    charsetFilter
    /*

    org.springframework.web.context.ContextLoaderListener

    dwr
    org.directwebremoting.spring.DwrSpringServlet

    debug
    true

    1

    displaytag
    org.springframework.web.servlet.DispatcherServlet

    contentConfigLocation
    /WEB-INF/displaytag-servlet.xml

    2

    dwr
    /dwr/*

    displaytag
    *.html

    The error is:
    avax.servlet.ServletException: No DWR configuration was found in your application context, make sure to define one

    and other error:
    (FrameworkServlet.java:229) - Context initialization failed
    org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'dwrConrtoller': Cannot resolve reference to bean '__dwrConfiguration' while setting bean property 'configurators' with key [0]; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No bean named '__dwrConfiguration' is defined

Add a Comment