Invoke Wicket 6 code using Javascript and retrieve the result

Question

Invoke Wicket 6 code using Javascript and retrieve the result

I successfully implemented a way to call my Wicket 6 Java code from JavaScript using option A, as demonstrated in this example:

However, I am now facing the challenge of finding examples for returning data from the Java side back to JavaScript. The generated JavaScript callback function does not include a return statement. How can I accomplish this?

In clarification, I am not attempting to set an attribute in Java. Calling Wicket from JavaScript is not the issue at hand. My goal is to return a JSON object from Wicket to the browser as a result of an Ajax request.

Finding inspiration from martin-g's examples, I developed a functional implementation...

Java

public class MyAjaxBehaviour extends AbstractDefaultAjaxBehavior {

    @Override
    protected void onComponentTag(ComponentTag tag) {
        super.onComponentTag(tag);
        tag.put("aprachatcallbackurl", getCallbackUrl());
    }

    @Override
    protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
        super.updateAjaxAttributes(attributes);
        attributes.setDataType("json");
        attributes.setWicketAjaxResponse(false);
    }

    @Override
    protected void respond(AjaxRequestTarget target) {
        getComponent().getRequestCycle().replaceAllRequestHandlers(
            new TextRequestHandler("application/json", "UTF-8", "{...JSON GOES HERE...}));
    }
}

JavaScript

var mySuccessCallback = function(param1, param2, data, statusText) {
    // Data contains the parsed JSON object from MyAjaxBehaviour.respond(...)
    ...
}

var myFailureCallback = function() {
    ...
}

Wicket.Ajax.get({
    "u": callbackUrl,
    "dt": "json",
    "wr": false,
    "sh": [mySuccessCallback],
    "fh": [myFailureCallback]
});

The main issue lies in the fact that the Wicket 7 Reference incorrectly advises to use "wr" instead of "dt" in the JavaScript call. :)

javascript java wicket wicket-6

Answer 1

Answer №1

I believe there is a simpler way to accomplish this task!

To utilize the Wicket Ajax API, you only need to use: Wicket.Ajax.ajax({...}). On the server side, all you have to do is save the callback URL, which can be done by storing it globally in the window object or within HTML element attributes like data-the-url.

public class CallFromJavascriptBehavior extends AbstractDefaultAjaxBehavior {
   @Override
   protected void respond(AjaxRequestTarget target) {
      final StringValue parameterValue = RequestCycle.get().getRequest().getQueryParameters().getParameterValue("yourName");
      System.out.println(String.format("Hello %s", parameterValue.toString()));

      // Write something to the WebResponse and then access it in the JS success handler. Refer below for details
   }

   @Override
   public void onComponenntTag(ComponenntTag tag, Component component) {
       super.onComponenntTag(tag, component);
       tag.put("data-the-url", getCallbackUrl());
   }
}

In your JavaScript code, you can then proceed with:

var callbackUrl = jQuery("#theElementId").data("the-url");
Wicket.Ajax.get({"u": callbackUrl, "sh":[successHandler], "fh": [failureHandler] });

The successHandler and failureHandler functions can either be defined inline as function(...) {} or externally.

For further information and documentation, kindly visit:

You can also explore a detailed example in a blog article at

Answer 2

I believe there is a simpler way to accomplish this task!

To utilize the Wicket Ajax API, you only need to use: Wicket.Ajax.ajax({...}). On the server side, all you have to do is save the callback URL, which can be done by storing it globally in the window object or within HTML element attributes like data-the-url.

public class CallFromJavascriptBehavior extends AbstractDefaultAjaxBehavior {
   @Override
   protected void respond(AjaxRequestTarget target) {
      final StringValue parameterValue = RequestCycle.get().getRequest().getQueryParameters().getParameterValue("yourName");
      System.out.println(String.format("Hello %s", parameterValue.toString()));

      // Write something to the WebResponse and then access it in the JS success handler. Refer below for details
   }

   @Override
   public void onComponenntTag(ComponenntTag tag, Component component) {
       super.onComponenntTag(tag, component);
       tag.put("data-the-url", getCallbackUrl());
   }
}

In your JavaScript code, you can then proceed with:

var callbackUrl = jQuery("#theElementId").data("the-url");
Wicket.Ajax.get({"u": callbackUrl, "sh":[successHandler], "fh": [failureHandler] });

The successHandler and failureHandler functions can either be defined inline as function(...) {} or externally.

For further information and documentation, kindly visit:

You can also explore a detailed example in a blog article at

Answer 3

Answer №2

If you want to utilize a Resource and attach it for use with your preferred Ajax technique, you can easily do so.

Here's an illustration:

public class MyResource extends AbstractResource
    @Override
    protected ResourceResponse newResourceResponse( Attributes attributes )
    {

        ResourceResponse resourceResponse = new ResourceResponse();
        resourceResponse.setContentType( "text/json" );
        resourceResponse.setTextEncoding( "utf-8" );

        HttpServletRequest request = (HttpServletRequest) attributes.getRequest().getContainerRequest();

        try
        {
            this.json = IOUtils.toString( request.getInputStream() );
        }
        catch ( IOException e )
        {
            e.printStackTrace();
        }

        resourceResponse.setWriteCallback( new WriteCallback()
        {
            @Override
            public void writeData( Attributes attributes ) throws IOException
            {
                OutputStream outputStream = attributes.getResponse().getOutputStream();
                Writer writer = new OutputStreamWriter( outputStream );


                writer.write( MyResource.this.json );
                writer.close();
            }
        } );

        return resourceResponse;
    }

(Extracted from my earlier response available at )

To implement the mounting process, check out the following link:

Answer 4

If you want to utilize a Resource and attach it for use with your preferred Ajax technique, you can easily do so.

Here's an illustration:

public class MyResource extends AbstractResource
    @Override
    protected ResourceResponse newResourceResponse( Attributes attributes )
    {

        ResourceResponse resourceResponse = new ResourceResponse();
        resourceResponse.setContentType( "text/json" );
        resourceResponse.setTextEncoding( "utf-8" );

        HttpServletRequest request = (HttpServletRequest) attributes.getRequest().getContainerRequest();

        try
        {
            this.json = IOUtils.toString( request.getInputStream() );
        }
        catch ( IOException e )
        {
            e.printStackTrace();
        }

        resourceResponse.setWriteCallback( new WriteCallback()
        {
            @Override
            public void writeData( Attributes attributes ) throws IOException
            {
                OutputStream outputStream = attributes.getResponse().getOutputStream();
                Writer writer = new OutputStreamWriter( outputStream );


                writer.write( MyResource.this.json );
                writer.close();
            }
        } );

        return resourceResponse;
    }

(Extracted from my earlier response available at )

To implement the mounting process, check out the following link:

Invoke Wicket 6 code using Javascript and retrieve the result

Answer №1

Answer №2

Similar questions

Passing the output of a function as an argument to another function within the same HTTP post request

Storing JSON arrays in MongoDB becomes chaotic when using the .save() function from Mongoose

Error message encountered in Android Studio: Class duplication detected

Storing Objects in MongoDB using Node.js

Using a boolean checkbox with Spring MVC and implementing ajax

Having issues executing TestNG project through command prompt commands

What is the best method for bringing in string values (a, b, c) to create 3D shapes in three.js

Modifying the input's value dynamically alters the selection choices in Vuetify

How can I uniquely combine a code with an existing CSS class and make modifications to it?

What is the best way to generate a consistent and unique identifier in either Javascript or PHP?

Utilizing the power of HTML datalist and *ngFor to present one value while sending another

Ensure that both the top row and leftmost column are fixed in a vertical header using JQuery DataTable

Utilize the power of Elasticsearch.js along with Bluebird for enhanced performance

Conflicting jQuery slide effects and jQuery UI positioning causing issues

Is there a way to distinguish the HTML Elements from the CSS elements and retrieve them individually?

What is the best way to concentrate on necessary or incorrect fields?

utilizing Nuxt code in Elixir/Phoenix

The Contact.php page has the ability to send emails, however, the content of the

Attempting to showcase the information in my customized SharePoint Online list through a Web Part Page utilizing AngularJS

Does an invisible property value exist?