Friday, June 12, 2009

Calling Wicket from Javascript

I needed to call into Wicket code from a jQuery function. Building on the sample code from Calling Wicket from Javascript, I created an end-to-end working example. In my case I wanted to manipulate a row in my data table when a user clicked a jQuery widget in that row. I needed to pass the markup id from the widget to the Wicket handler. In my case, My item type is DefaultMutableTreeNode. Note that contrary to what the wiki page says, I did not need to put a script tag in my html code.

MyDataView.java


@Override
protected void populateItem(final Item<DefaultMutableTreeNode> item)
{
super.populateItem(item);
// Important!!
item.setOutputMarkupId(true);
...
}

MyDataPanel.java


public class MyDataPanel extends DataPanel
{

public MyDataPanel(String id, final HtDataView dataView,
WebPage parent)
{
...

final AbstractDefaultAjaxBehavior behave = new AbstractDefaultAjaxBehavior()
{
private static final long serialVersionUID = 1L;

@Override
protected void respond(final AjaxRequestTarget target)
{
final String paramMarkupId = RequestCycle.get().getRequest().getParameter("markupId");
MyDataPanel.this.visitChildren(Item.class,
new Component.IVisitor<Item<DefaultMutableTreeNode>>()
{
public Object component(Item<DefaultMutableTreeNode> item)
{
if (StringUtils.equals(paramMarkupId, item.getMarkupId()))
{
...your code here...
}
return STOP_TRAVERSAL;
}
});
}
};
parent.add(behave);
final CharSequence url = behave.getCallbackUrl();
add(new AbstractBehavior()
{
private static final long serialVersionUID = 1L;

@Override
public void renderHead(IHeaderResponse response)
{
String js = "function callWicket(markupId) { var wcall = wicketAjaxGet ('"
+ url + "&markupId='+markupId, function() { }, function() { } ) }";
response.renderJavascript(js, "myScript");
}
});
...

MyJQueryStuff.js


$.fn.toggleBranch = function() {
...
var idAttr = $(this).attr("id");
callWicket(idAttr);
...

2 comments:

etal said...

You can avoid passing the markup ids by attaching a behavior to each list item.

Julian Sinai said...

Etal, that's a good point. Thanks for the suggestion.