Add Dynamic JS/CSS to Wicket

Adding dynamic javascript or css to a wicket page. Using ResourceReference is good for files, but code and urls requires using IHeaderContributor.

public final class HomePage extends WebPage implements IHeaderContributor{ ResourceReference ref = new ResourceReference(HomePage.class,"javascript.js"); private WebMarkupContainer container; public HomePage() { this(null); } public HomePage(PageParameters params) { super(params); container = new WebMarkupContainer("area"); container.setOutputMarkupId(true); add(container); } @Override public void renderHead(IHeaderResponse response) { response.renderJavascriptReference("http://ajax.googleapis.com/ajax/libs/jquery/­1.4.2/jquery.min.js"); response.renderJavascriptReference("http://ajax.googleapis.com/ajax/libs/jqueryu­i/1.8.4/jquery-ui.min.js"); response.renderJavascript("" + "$(document).ready(function() {" + "$('#"+container.getMarkupId(true)+"').fadeOut(8000);" + "});","fadeOutFunction"); }
}

Category:

Education

Tags:

• java
• ee
• jee
• wicket
• dynamic
• js
• css
• enterprise
• edition
• javascript
• tutorial

[ProgramJava]

@leneyoyo Thank you for the support, it helps knowing that people actually use some of these posts. With Wicket 1.5 some of the technical code might be out of date, but it is pretty much the same, except PackageResourceReference instead. But most of the video should still be correct.

[leneyoyo]

Hey dude awesome I am just a couple of months into a new job that uses wicket heavily and I was needing this info exactly, thanks for posting it!

[ProgramJava]

@jensiator2 I am not sure how they would handle your issue exactly. I did notice that this similar bug exists when adding a WiQuery Dialog in a Repeating List. Every time I update that list, it seems to also add the dialog again which duplicates it (similar issue to yours). The workaround I mentioned is an idea I was toying with myself. I would personally rather not remove and add code... I would rather add it only once correctly and not worry (more efficient). Keep trying!

[jensiator2]

Thanks. I was not aware of that I needed to destoy it. I'll check out the source code of wiquery. I probably want to do what they are doing.

[ProgramJava]

@jensiator2 I actually use WiQuery with Wicket, though I don't know if its necessary. At any rate, I do know what you mean, you will need to do "target.appendJavaScript(...)" and insert code to destroy and remove the dialog component, because every time the jquery is run it will add a new dialog component. You should keep track and only run the code once or try removing any dialog before adding the new one.

[jensiator2]

Hi Thanks for good tutorial.

I Have used you IHeaderContributor for creating a jQuiry dialog component. Its basicly a panel that adds the dialog code "$(function() {$( "#dialog" ).dialog();});" in the renderHead method. Then I got some methods in the panel for the open and close functionallity. But I got some problems when this panel is updated by pAjaxRequestTarget. It works if I use renderOnDomReadyJavascript. But it adds the modal divs again and again in the bottom of the page. Got any Ideas