Wicket manipulate javascript import order

Question

I'm trying to use the very nice ConfirmerAjaxLink from Visural. However, I'm getting a js script when loading the page: 'jQuery is not defined'.

I wrote a little test page to identify the problem:

public class ConfirmAjaxLinkTestPage extends WebPage {

public ConfirmAjaxLinkTestPage() {
    this.add(new ConfirmerAjaxLink("confirm") {

        @Override
        public void onClick(AjaxRequestTarget target) {
            System.out.println("OK");
        }
    });
}

@Override
public void renderHead(IHeaderResponse response) {
    response.renderJavaScriptReference(new JavaScriptResourceReference(
            JavascriptLibraryUtil.class,
            "jquery/jquery-1.6.1.min.js"));
}
}

After a quick search I saw that the ConfirmerAjaxLink will add another javascript that uses jQuery. However, since this is done through a behavior that is added to the component (above link) this script gets added to the markup before the jQuery one (since this is called before the renderHead of my page).

If I change the headerRenderStrategy to parent first like this:

System.setProperty("Wicket_HeaderRenderStrategy","org.apache.wicket.markup.renderStrategy.ParentFirstHeaderRenderStrategy");

it works but this is more a hack than a solution (also, as stated in in AbstractHeaderRenderStrategy:NOT OFFICIALLY SUPPORTED BY WICKET).

Is there a clean way to this (I would think not exceptional) problem?

Answer 1

The Visural example application includes jQuery in the constructor for the main WebApplication class. Code from the Visural example app:

public class ExamplesApplication extends WebApplication {

public ExamplesApplication() {
    addRenderHeadListener(JavascriptPackageResource.getHeaderContribution(new JQueryResourceReference(Version.V1_4_2)));
}

You could also just put the jQuery include in the head of your page HTML. I tested it and that worked fine.