"Breaking Wicket ajax with broken markup" or "How to shoot yourself in the foot - Part 1"

Another day, another screw up ;-)

Here a short example how you can break Wicket ajax pretty easy but spend a lot of time on figuring out what went wrong.

I had a small page with a form in it and button issuing an ajax request. When clicking the button elements got added to the form using a PropertyListView. Not a hard task so it was set up pretty quick and did work like a charm. But then I thought "Would be nice to reuse this form on a few other pages as well." and decided to wrap it into a panel (panels are cool since they allow you to encapsulate the grouped components as well as their markup and properties).

Building the panel was also done real quick and after embedding it into my page instead of the original form I fired up my application again to see how well I had done and gloat a bit in front of.. we.. basically myself ;-)

I hit my nifty ajax button and BAMM!!! - FULL PAGE RELOAD!!!

After a short episode of wtfs and other cussing I tried to find out what the problem was. Conviniently the server logs showed exactly.. nothing. No errors, no warnings. Debugging the ajax call also did not work because the debugger did not get into any breakpoint, which showed that the ajax code did not get executed anymore.

Next I tried to check my changes but of course everything looked fine... (oh how wrong I was..)

So grabbed my last straw, the ajax debug window - savior of ajax screw ups all around the world. I opened it and started to fill the form fields, where each click got shown in the debug window but as soon as I hit the former ajax button the windows closed down - D'OH!

After trying it a few times I was able to spot an error message being displayed in the debug window before it closes. But unfortunately I could not see what the exact message was. So again I went double checking the java code and markup and suddenly my mistake revealed itself to me.

When I exchanged the form for the new panel in my page I forgot to change the markup tag the component was mapped to. And because the tag was associated to a form it was a form tag in the original version. But that form tag was now moved inside the panel and by forgetting to replace the page's form tag with a span tag the final markup ended up with a form wrapped inside a form.

After makeing the tag a span everything was working fine again. Having nested form tags is of course totally beyond any specifiaction etc. but I was a bit surprised that in effect this made my ajax request to behave like a regular page reload without any exceptions or anything like that.

And yes, this was somewhat embarrasing, but maybe someone else screws up the same way and this post helps him (or her) to save some time.. or just gives someone a good laugh *g*