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...
- CSS Vertical Align: Divs A short tutorial that shows you how you can align your divs vertically.
- Software Quality for Developers Learn about software quality, TDD, ... in this 6-part video course.
- HTML5 canvas coordinates on the desktop vs. on the iPad: Example code - HTML 5 canvas coordinates in mouse events and touch events.