Why does Wicket changes the id of the html elements?

Question

If I write

<form wicket:id="form" id="form>

or even

<form wicket:id="form>...

Then the rendered HTML shows the id 'form' appended with different numbers whenever the page is refreshed e.g.

   <form id="form7"....

Is there a way to disable this behavior of the Wicket framework?

Answer 1

This is the behavior you want in most cases when using wicket. The dynamic id is meant to prevent id collisions when Ajax behaviors are added to components or added to ajax responses for refreshing. For any of these situations, you really need both the client response and the server side state to be in cahoots. If there are external js resources you need the id of a component for dom lookup, then I would suggest adding a custom wicket component behavior that would then generate the js call to a function passing in the generated id.

I realize what I'm going to describe leads you more into the forest of Wicket. But I have been more than happy with the ajaxy stuff that Wicket opens up for you out of the box.

Answer 2

We set markup ids by hand extensively on our project to ease automatic testing with Selenium testing framework. It definitely works.

Component.setOutputMarkupId(true); // write id attribute of element to html
Component.setMarkupId("someid"); // id attribute of element is "someid"

Answer 3

This is Wicket desing feature. You can use class for linking styles and components.

<form wicket:id="form" id="form>

Also you can to try (I never did it) setMarkupId . I'm not sure that it good way.

Answer 4

It has been a while since I worked with Wicket, but I remember that when wicket uses ajax elements, its ids are auto-generated (the id of the tag, not the wicket:id). You can control the id of the tag when not using and ajax element. In your case, since there is no code, I would guess that you will have to change any AjaxButton or Ajax* from your form.

Answer 5

Yes you can write custom JavaScript... you just need to implement it according to the 'Wicket way'. You can decorate components, Ajax calls etc. with custom JavaScript, then it all plays nicely.