Finally, I did a 100% Wicket solution :-)
Here the code for the client:
Wicket.Ajax.get({
u: ajaxCallbackUrl,
c: componentId,
ep: {'request': 'translations'},
dt: 'json',
wr: false, // To be sure the response will not be parsed as an XML
Ajax response.
sh: [function (u: string, jqXHR: any, data: any, textStatus: string) {
console.log("AJAX callback success:", data);
}],
fh: [function (u: string, jqXHR: any, exception: any, textStatus: string) {
console.error("AJAX callback failure:", exception);
}]
});
And the code for the panel:
ajaxBehavior = new AbstractDefaultAjaxBehavior() {
@Override
protected void respond(AjaxRequestTarget target) {
final StringValue requestValue =
getRequest().getRequestParameters().getParameterValue("request");
if (!requestValue.isEmpty() &&
ajaxDispatchers.containsKey(requestValue.toString())) {
final String request = requestValue.toString();
ajaxDispatchers.get(request).execute();
NodeGraphPanel.this.getRequestCycle().scheduleRequestHandlerAfterCurrent(new
TextRequestHandler("application/json", "UTF-8",
jsonService.toJson(Action.builder().action("translations").build())));
}
}
};
add(ajaxBehavior);
Maybe it will help someone.
Regards,
Stef
Le sam. 16 nov. 2024 à 16:32, Ernesto Reinaldo Barreiro <[email protected]>
a écrit :
> Hi,
>
> You can:
>
> - directly use JQuery for your call. This will avoid the wicket logic at
> client side.
> - Mount an AbstractAjaxBehavior and on respond do something like
>
> @Override
> public void onRequest()
> {
> RequestCycle requestCycle = RequestCycle.get();
> IRequestParameters parameters =
> requestCycle.getRequest().getQueryParameters();
>
> requestCycle.scheduleRequestHandlerAfterCurrent(new
> TextRequestHandler(this.mimetype, this.encoding,
> this.getResponse(parameters)));
> }
>
>
> See e.g.
> https://github.com/sebfz1/wicket-jquery-ui/blob/wicket9.x/wicket-jquery-ui-core/src/main/java/com/googlecode/wicket/jquery/core/behavior/AjaxCallbackBehavior.java
> as inspiration/reference.
>
> This is how, for instance, Wicket wrapper for jqueryUI autocomplete
> transfers the JSON used to build the autocomplete at client side.
>
>
> On Sat, Nov 16, 2024 at 6:58 AM Stéphane V. <[email protected]> wrote:
>
> > Sorry, I found my stupidity: I forgot the ! in the condition :-(
> >
> > if (requestValue.isEmpty() &&
> > ajaxDispatchers.containsKey(requestValue.toString())) {
> >
> > if (!requestValue.isEmpty() &&
> > ajaxDispatchers.containsKey(requestValue.toString())) {
> >
> > The JSON is now sent to the client, but wicket-ajax-jquery.js is creating
> > an error because it's waiting for the tag ajax-response:
> >
> > wicket-ajax-jquery-ver-1722411717821.js:219 Wicket.Ajax.Call.failure:
> Error
> > while parsing response: TypeError: envelope.getElementsByTagName is not a
> > function
> >
> >
> > Le sam. 16 nov. 2024 à 10:37, Stéphane V. <[email protected]> a écrit :
> >
> > > Hello everyone,
> > >
> > > I am working on making Ajax calls from a Panel/JavaScript component.
> This
> > > component is entirely written in Typescript and uses a canvas element.
> > The
> > > only HTML elements within the Panel are <div><canvas></canvas></div> to
> > > render the canvas.
> > >
> > > I would like to retrieve some information from the server when the
> > > JavaScript component initializes. I was thinking of using
> Wicket.Ajax.get
> > > for this. Throughout the lifecycle of the JavaScript component,
> > additional
> > > Ajax calls will be needed.
> > >
> > > On the server side, I believe I need to use an
> > AbstractDefaultAjaxBehavior.
> > > I want to use GET for retrieving data and POST with a JSON body for
> > > sending data.
> > >
> > > Here’s my current implementation in the Panel:
> > >
> > > ajaxBehavior = new AbstractDefaultAjaxBehavior() {
> > > @Override
> > > protected void respond(AjaxRequestTarget target) {
> > > final StringValue requestValue =
> > getRequest().getRequestParameters().getParameterValue("request");
> > > if (requestValue.isEmpty() &&
> > ajaxDispatchers.containsKey(requestValue.toString())) {
> > > final String request = requestValue.toString();
> > > ajaxDispatchers.get(request).execute();
> > > getRequestCycle().scheduleRequestHandlerAfterCurrent(new
> > TextRequestHandler("application/json", "UTF-8",
> > jsonService.toJson(Action.builder().action("translations").build())));
> > > }
> > > }
> > > };
> > > add(ajaxBehavior);
> > >
> > > Here is the code for the first Ajax call (TypeScript):
> > >
> > > Wicket.Ajax.get({
> > > u: ajaxCallbackUrl,
> > > c: componentId,
> > > ep: {'request':'translations'},
> > > dt: 'json',
> > > sh: function (attributes: any) {
> > > console.log("AJAX callback success:", attributes);
> > > },
> > > fh: function (attributes: any) {
> > > console.error("AJAX callback failure:", attributes);
> > > }
> > > });
> > >
> > > The call is made to the server, but the JSON response is not parsed
> > > correctly, and I get the following error in the browser console:
> > >
> > > Wicket.Ajax.Call.failure: Error while parsing response: SyntaxError:
> > > Unexpected token '<', "<?xml vers" is not valid JSON
> > > Indeed, the server response is and it's not the JSON I'm sending with
> my
> > > panel:
> > > <?xml version="1.0" encoding="UTF-8"?><ajax-response></ajax-response>
> > >
> > > Where did I go wrong?
> > >
> > > Thank you for your help!
> > >
> > > Regards,
> > >
> > > Stef
> > >
> >
>
>
> --
> Regards - Ernesto Reinaldo Barreiro
>
