Update: I finally solved the problem, so this article is obsolete. Read about the solution here:

Solved: jQuery AJAX and Wicket 1.5 custom component (panel)

The problem: I want to submit some data using the jQuery “ajax”-function to a wicket ajax behaviour.

I found some hints on StackOverflow about how to do it: Here is some info about sending the request with jQuery and here is more information about the Wicket AbstractAjaxBehaviour

I tried to implement this solution. Here is what I did:

NewEntry.html

<!DOCTYPE HTML>

<html>
	<wicket:head>
		<script src="jquery-1.5.2.min.js" type="text/javascript"></script>
	</wicket:head>
	<body>
		<h1>New Entry</h1>
		
		<script type="text/javascript" wicket:id="submitScript">/* script rendered here */</script>
		<input type="button" value="Share" id="sharebutton" onClick="submitToWicket('foobar')"></input>
	</body>
</html>

NewEntry.java

package com.scribblingspree.view.scribbling;

import org.apache.wicket.behavior.AbstractAjaxBehavior;
import org.apache.wicket.markup.html.basic.Label;

import com.scribblingspree.view.BasePage;

public class NewEntry extends BasePage {
	private static final long serialVersionUID = 1L;
	
	public NewEntry() {
		AbstractAjaxBehavior behave = new AbstractAjaxBehavior() {
			private static final long serialVersionUID = 1L;
			public void onRequest() {
				System.out.println("called!");
			}
		};
		add(behave);
		
		String script = createSubmitScript(behave);
		Label submitScript = new Label("submitScript", script);
		submitScript.setEscapeModelStrings(false);
		add(submitScript);
	}

	private String createSubmitScript(final AbstractAjaxBehavior behave) {
		String submitScript = "\nfunction submitToWicket(body) {\n";
		submitScript +=       "    $.ajax({\n";
		submitScript +=       "            url: '"+behave.getCallbackUrl()+"',\n";
		submitScript +=       "            type: 'post',\n";
		submitScript +=       "            cache: 'false',\n";
		submitScript +=       "            data: JSON.stringify(body),\n";
		submitScript +=       "            contentType: 'application/json',\n";
		submitScript +=       "            dataTyoe: 'json',\n";
		submitScript +=       "    });\n";
		submitScript +=       "}\n";
		return submitScript;
	}
}

I know this code is not very elegant, but it really is only a quick test.

When I run the application and press the button, I can see (with the Chrome developer tools) that the $.ajax(…) is executed. The POST request is sent, but the server answers with status code “302 Moved Temporarily” and then the whole page is re-loaded.

AFAICS my code is equivalent to the solutions on StackOverflow. The question is: Did I miss something or is this solution not working in Wicket 1.5 RC5? I could not make the code work correctly within a couple of hours so I finally gave up. After all, this was just a quick test, not an actual project I am working on, so it better be fun!

You might also be interested in...