Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This mini tutorial shows you how to call Wicket from Javascript. It is based on an e-mail from Michael Sparer.

...

Setting up the Wicket response to the

...

JavaScript call

Add the AbstractDefaultAjaxBehavior to the component you'd like to call from javascript. You then have to override the respond method of AbstractDefaultAjaxBehavior to perform your actions and to append your changes to the response

For example in your panel:

Code Block

final AbstractDefaultAjaxBehavior behave = new AbstractDefaultAjaxBehavior() {
    protected void respond(final AjaxRequestTarget target) {
        target.add(new Label("foo", "Yeah I was just called from Javascript!"));
    }
};
add(behave);

...

Invoking JavaScript from your Java Wicket component

Any component can add Javascript to the page header by implementing IHeaderContributor, that's where the
response-object gets passed.
TODO: add an example of Java code.

Alternatively, you can add a Wicket label containing JavaScript to your page:

Code Block
html
html
titleHTML
<script type="text/javascript" wicket:id="myScript">/* script will be rendered here */</script>
Code Block
java
java
titleJava
Label myScript = new Label("myScript", "callWicket();");
myScript.setEscapeModelStrings(false); // do not HTML escape JavaScript code

...

Here is an example Javascript code:


add(myScript);

Calling your Java Wicket component from JavaScript

If you add any class that extends AbstractDefaultAjaxBehavior to your page, wicket-ajax.js will be added to the header ofyour web page. wicket-ajax.js provides you with two basic methods to call your component:

Wicket 6.0+

You use Wicket.Ajax.get( ) and Wicket.Ajax.post( ) in JavaScript to do an Ajax call to Wicket manually. In Wicket 6, AbstractDefaultAjaxBehavior also has a convenience method to generate a JavaScript function that performs the call: getCallbackFunction(...). This method can also generate functions that pass parameters from JavaScript to Wicket.

Older Versions

function wicketAjaxGet(url, successHandler, failureHandler, precondition, channel)
and
function wicketAjaxPost(url, body, successHandler, failureHandler, precondition, channel)

Note
titleDon't POST without POST content

Note that some web servers gulp on HTTP POST requests with no POST content (in other words: "wicketAjaxPost($URL);" is evil).
This is due to some browsers (Firefox, ...) not sending the mandatory header "content-length" when the POST body is empty.
Jetty is generous in this case, while Tomcat might respond with an HTTP 411 error code.
So if you have to use HTTP POST requests, then make sure that at least a dummy JavaScript object is added as POST data.

Example - Wicket 6.0+

This snippet is taken from a piece of code that makes use of PackageTextTemplate, which is added in the renderHead( component, response ) of AbstractDefaultAjaxBehavior

Code Block
java
java
titleJava
		String componentMarkupId = component.getMarkupId();
		String callbackUrl = behave.getCallbackUrl().toString();

		Map<String, Object> map = new HashMap<>();
		map.put( "callbackUrl", callbackUrl );
		map.put( "args", "Your Arguments Here" );
		map.put( "componentMarkupId", componentMarkupId );

		PackageTextTemplate ptt = new PackageTextTemplate( clazz, "resources/main.js" );
		OnDomReadyHeaderItem onDomReadyHeaderItem = OnDomReadyHeaderItem.forScript( ptt.asString( map ) );
Code Block
javascript
javascript
titleJavaScript - Fragment of resources/main.js
var wcall = Wicket.Ajax.get({ u: '${callbackUrl}' + '${args}' });

Example - Older Versions

Code Block
javascript
javascript
titleJavaScript
Code Block

function callWicket() {
   var wcall = wicketAjaxGet('$url$' + '$args$', function() { }, function() { });
}

...

You can optionally add arguments by appending these to the URL string. They take the form &foo=bar&.

Obtaining the GET/POST arguments on the server side

Ok, this is actually quite ugly, but you get the optional arguments in the response method like sothis:

Code Block
titleJava
IRequestParameters params
Map map = RequestCycle.get().getRequest().getRequestParameters(WebRequestCycle));

Or to retrieve a single parameter by its key:

Code Block
titleJava
String paramFoo = RequestCycle.get().getRequest().getRequestgetRequestParameters().getParameterMapgetParameterValue("foo");