Wicket Javascript Internals dissected

SO you need to do something special with a javascript and you want to integrate that with wicket. In my last article I looked at this from the wicket side and wrote about what you can do to push something out from wicket. But what if you want to interact? Then you will have to take a peek at wickets javascript internals. If you are working on an ajax component you get these wicket javascript source files included as default:

  1. wicket-event.js
  2. wicket-ajax.js


This file contains everything Wicket needs for event handling, but also methods for detecting browser like Wicket.Browser.isIELessThan7() which could come in handy if youre doing your own script, no need to write it again..


This file hold everything Wicket needs for doing ajax. So it’s a big file containing a lot of interesting possibilities.

The most interesting method are wicketAjaxGet its the way to contact the server doing ajax. It’s signature are this:

function wicketAjaxGet(url, successHandler, failureHandler, precondition, channel)

The first parameter are the url for wicketAjaxGet to call server side with, it usually gets generated from serverside, and you can add parameters to it and get them server side. Furthermore it takes 3 functions and a channel. Channel are also usually populated for you so dont think about that. The functions however are called either on sucess, failure or as a precondition. These supply very nice options for you if you need to do something special with the result of the wicketAjaxGet you can put in callbacks. Small example from the mooTip ajax integration:

function mootipAjaxtooltip022(callback) {
var content='';wicketAjaxGet('?wicket:interface=:0:tooltip02::IBehaviorListener:1:',
 var tip=document.getElementById('mooTipContent').innerHTML;
 var callbackInside=callback;
 var runCallback=  callbackInside.pass(tip);
, null,null);

As you can see, if you count the parameters, I put in a success method for wicket to call once the request has finished, in this case it sets up a tooltip and displays it, by a method thats passed along using the content of the dom element called ‘mooTipContent’.

Theres also lighter methods like for example wicketHide and wicketshow. Methods for manipulating visibility of dom objects. Theres many more functions in there. But these should get you going.

The complete package

A small example that shows a invisible veil when a abstractajaxTimerEventBehavior is called:

 z-index: 99;
 /*cursor: wait;*/
<"p id="veil" style='display: none;' "><"/p">
		AbstractAjaxTimerBehavior ajaxTimerBehavior = new AbstractAjaxTimerBehavior(
				Duration.seconds(1)) {
			protected CharSequence getCallbackScript() {
				// TODO Auto-generated method stub
				return "wicketShow('veil');" + super.getCallbackScript();

			protected CharSequence getSuccessScript() {
				// TODO Auto-generated method stub
				return "wicketHide('veil');" + super.getSuccessScript();

And thats it, now you should be ready to do your own stuff :)

This Post Has One Comment

Leave a Reply