• 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

How to call Wicket code from JavaScript

October 23, 2019 Posted by Roman Sery wicket No Comments

You’ve read the previous post about the basics of ajax requests in Wicket, but you’re stubborn and still want to write some JavaScript. You also want the ability to execute your Wicket page code from JavaScript, which is actually very useful. Well this is the article for you!

I can think of lots of reasons why you would want to do this:

  • Having a sortable list of items, and persist the changes upon changing the sort order.
  • Doing periodic polling using setTimeout.
  • Reduce the number of ajax wicket components and behaviors.
  • You might just want more control over your client-side code and/or using frameworks that are client-side centric such as Reactjs.

Creating a callback URL

The first step to accomplish this is to create a Wicket behavior which will render it’s callback URL to the page it’s added to. The callback URL is what our JavaScript will use to interact with the behavior.

add(new AbstractDefaultAjaxBehavior() {
            private static final long serialVersionUID = 1L;
            protected void respond(final AjaxRequestTarget target) {
                //TODO handle the call from JS
            }
            @Override
            public void renderHead(Component component, IHeaderResponse response){
                super.renderHead(component, response);
                String callbackUrl = getCallbackUrl().toString();
                response.render(JavaScriptHeaderItem.forScript("our_callback_url = '" + callbackUrl + "';", "our_callback_url"));
            }
        });

When we add this to our WebPage and look at the source code, we will see in the <head> section a JS variable called ‘our_callback_url’ which provides the URL our JS can use to interact with this specific behavior and for this specific page.

Sending a request from Javascript

The second step is to write the JS code that will send a request to our_callback_url. We utilize helper functions provided by Wicket that are analogous to using jQuery.ajax(). In this example we will make the call inside of a button click handler:

<script type="text/javascript">
    $('#doCall').click(function() {
        Wicket.Ajax.get({ u: our_callback_url });
    });
</script>

<a href="#" id="doCall">Do Call</a>

The above code is the equivalent of using jQuery.ajax(). The difference is we define the success handler inside of the respond() method of our behavior as opposed to using the success callback in jQuery.ajax().

Passing additional data

We can also pass additional data with our requests by using the “ep” parameter:

 $('#doCall').click(function() {
    Wicket.Ajax.get({
	u: our_callback_url,
	ep: {'data1': "abc", 'data2': "gregregre"}
    });
});

We can than retrieve the values of ‘data1’ and ‘data2’ in our behavior’s respond() method as follow:

protected void respond(final AjaxRequestTarget target) {
	StringValue data1 = getRequest().getRequestParameters().getParameterValue("data1");
	StringValue data2 = getRequest().getRequestParameters().getParameterValue("data2");
}
No Comments
Share
7

About Roman Sery

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

You also might be interested in

Wicket quick tip #3: How to include templated Javascript files

May 3, 2020

A series of quick tips aimed at improving your productivity. How to create Javascript files with server-side injected values.

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.

Using interfaces to make Java enums more flexible

Jul 10, 2019

Imagine you need to easily customize your enumerations for each customer but want to have one codebase? Here's how

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