Ajax in Wicket is great, for the most part its usage is transparent and things work as you would expect. Where Ajax does not work perfectly, yet, is when it comes to partially updating repeaters. The problem is that repeater components do not have a markup tag of their own and so Wicket cannot transparently figure out where the updates should go.
Consider a simple case of a repeater rendering a list of contacts. Wicket markup looks like this:
1 <body> 2 <table> 3 <tr wicket:id="contacts"> 4 <td><span wicket:id="name"></span></td> 5 </tr> 6 </table> 7 </body>
And the rendered markup looks like this:
1 <body> 2 <table> 3 <tr><td><span>Lisa Simpson</span></td></tr> 4 <tr><td><span>Bart Simpson</span></td></tr> 5 </table> 6 </body>
As you can see, if we add a new item to the
ListView and try to repaint it via Ajax there is no root markup tag for the Wicket Ajax to replace. This is why it is necessary to add the repeater to a container and then repaint the container instead. In this case we would add a
WebMarkupContainer to the
table tag and repaint it via Ajax instead. This, however, will result in all table rows being rendered and sent over from server to client, which for a lot of cases is undesirable.
It is not too hard to support the usecase of "I added something new to the repeater and want to have just that row added via Ajax". The trick is to give Wicket a tag to repaint via Ajax which can be accomplished by doing the following:
- create the markup tag to represent the new item
- add it to the right place in the markup
- have Wicket repaint it via Ajax
Accomplishing this is pretty easy. Suppose we create the new item by submitting a form via an
When the form is submitted using the above
AjaxButton only the newly added item is repainted via Ajax instead of the entire table. A functional project is attached below.
This concept can be taken to the next level where a repeater can be "synced" with the markup on the client side. This would involve:
- Building a list of item ids currently in the repeater
- Invoking #onBeforeRender on the repeater to make it generate new items
- Building a list of new item ids in the repeater
- Syncing the client markup from old items to new items by deleting removed items and adding new items via the same technique as above
Maybe next time :)
Sample project: partialajax.zip