In this article I'm going to show you how to replace a component in Ajax response using animation effects like sliding, fading, etc.
To update a Component in Ajax request Wicket just replaces its old HTML DOM element with a new one created by the HTML in the response.
To update it with an animation you need to do:
- hide the old HTML element
- replace the component, but do not show it
- show the new HTML element
Attempt 1 (not working):
The second problem is that target.add(component); will show the new HTML element right away and thus slideDown has nothing to do.
Attempt 2 (working):
Problem 1) is solved by using notify as a callback function which should be executed when the sliding up is finished.
Problem 2) is solved by using DisplayNoneBehavior that add 'display: none' to the markup of this component just for this rendering (see Behavior#isTemporary(Component)).
This code can be extracted in a helper class and reused. Simple implementation of such helper class can be found in the demo application.
This functionality is broken in Wicket 6.4.0, 6.5.0 and 6.6.0. It is fixed with WICKET-5039.