• Fat Cats Boardgame
  • Wicket UI Library
  • About Me

Java and Wicket web development thoughts, tutorials, and tips

roman@coderdreams.com
Coder DreamsCoder Dreams
  • Fat Cats Boardgame
  • Wicket UI Library
  • About Me

Basics of Wicket AJAX requests

October 17, 2019 Posted by Roman Sery wicket No Comments

Wicket is a very server-side focused framework, so working with ajax requests is quite different from what you might be used. You generally don’t write your own client-side Javascript, but rather it is generated by the different Wicket behaviors that you create and add to form components.

Not to worry though, once you get used to it, you can be very productive! Possibly much more productive than writing a lot of your own client-side code.

A simple example scenario

Let’s use the simple example of a label that displays a user counter that needs to be asynchronously refreshed in response to events. In this case, a button click. Let’s look at one way you might do it using jQuery (when it was a thing) 馃檪

The jQuery way

You might write this kind of code to solve this:

<script type="javascript">
$(document).ready(function() {
    $("#refresh-btn").click(function(){
	$.ajax({url: update_users_count_url, success: function(result){
		$("#usersCountLbl").html(result);
	    }});
    });    
});        
</script>

<a href="#" id="refresh-btn">Refresh Users</a>
Num users: <div id="usersCountLbl"></div>

The Wicket way

With Wicket, we will change this to have two parts. The html will remain almost the same, but the javascript will go away. Here is the slightly modified html, the only difference being “wicket:id”:

<a href="#" wicket:id="refreshBtn">Refresh Users</a>
Num users: <div wicket:id="usersCountLbl"></div>

And here is the associated server-side code that will create the components and the ajax behavior:

Label usersCountLbl = new Label("usersCountLbl", new LoadableDetachableModel<Integer>() {
    @Override protected Integer load() { return userService.getUserCount(); }
});
usersCountLbl.setOutputMarkupId(true);
add(usersCountLbl);

AjaxLink<Void> refreshBtn = new AjaxLink<Void>("refreshBtn") {
    @Override
    public void onClick(AjaxRequestTarget target) {
	target.add(usersCountLbl);
    }
};

Line 4 is critical for making this work. It is telling Wicket to output an ID attribute when generating the HTML for usersCountLbl so that client-side javascript can use that ID when wiring up events.

Line 10 is telling Wicket to re-render the contents of usersCountLbl, send it back to the browser, and generate JS to update the html. Which would be the equivalent of the jQuery code above that replaces the html.

AjaxRequestTarget

Whenever you have any callback function that will be executed in response to an ajax request (onclick, onblur, onchange, etc), you will have access to an AjaxRequestTarget target.

By adding Wicket components to the target, you are saying you want them to be refreshed or re-rendered. Several things will happen:

  • The model of the component will be re-evaluated, in this case, the user count. Note that if you don’t use a model for the label, this will not work.
  • onConfigure() of the component will be executed. Here you can define visibility rules such as showing the label only if the user is an admin.

Any component that you add to the target must have been set using setOutputMarkupId(true). This is so the client-side jquery events can be wired up correctly.

Conclusion

That should be all you need to know to get started. Familiarize yourself with the classes in the org.apache.wicket.ajax package and have fun forgetting how to write Javascript!

No Comments
Share
11

About Roman Sery

I've been a software developer for over 10 years and still loving Java!

You also might be interested in

Customizing your codebase per customer: Part 2 – Conditions

Apr 25, 2020

In part 2 we look at a more powerful approach to customizing your codebase.

How to use Wicket component events

How to use Wicket component events

Feb 23, 2020

One of the most powerful features of Wicket, component events, let's you build complex yet decoupled structures.

How to write a JSON response in Wicket

Jan 26, 2020

Learn how to create JSON response endpoints in Wicket

Categories

  • aws
  • customization
  • database
  • debugging
  • enum
  • java
  • models
  • performance
  • projects
  • react
  • software design
  • Spring
  • tool
  • Uncategorized
  • wicket

Recent Posts

  • Rent Day
  • Self-contained Wicket Fragments
  • Pros and cons of unit testing
  • Themeable React Monopoly board
  • Please dont use client-specific release branches

Recent Comments

  • TCI Express Thanks for sharing such insightful information. TCI Express truly stands out as the best air logistics company, offering fast, secure, and efficient air express and cold chain transportation services....

    Tracking down a bug in production Wicket application 路  March 25, 2025

  • Tom Error: A zip file cannot include itself Can you please correct the plugin part so it doesn't use the same folder as input?

    Deploying Spring Boot app to AWS Beanstalk with Nginx customization 路  September 3, 2021

  • Golfman: Reality always wins I've used both Wicket and front-end JS frameworks and, having worked extensively on both, I can tell you that "Speed of development" is definitely NOT with the JS frameworks. You basically end up...

    Five reasons you should use Apache Wicket 路  August 29, 2021

  • Kiriller Sorry can not agree with you, wicket might be a well built technical framework. But the advantages of using a front-end framework like react.js and vue.js can not be beaten by Wicket nowadays. - Speed...

    Five reasons you should use Apache Wicket 路  August 23, 2021

  • Bernd Lauert Sorry but i have to refute your claims with the following arguments: 1. the Wicket community may be small but it is also very responsive, you usually get a helpful answer from the core devs on the...

    Five reasons you should use Apache Wicket 路  July 1, 2021

Archives

  • May 2021
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019

Contact Me

Send Message
Prev Next