for example,
in the pic above, first cell contains list of data with a radio button to select and a edit button. On the right side, we have editing screen with save and cancel button. Now we want to display only either of these cells.<table>
<tr>
<td>
<div id="viewBlock">
Some content comes here
</div>
</td>
<td>
<div id="editBlock">
</div>
</td>
</tr>
</table>
On screen load, only table of contents will be shown. Now on selection of a record and click of Edit, first will be hidden and second cell will be visible.
To acheive this, we can use wicket ajax components. Say we create two webmarkupcontainers viewBlock and editBlock. Set the editBlock's visibility to false. And show it onclick of the ajax button Edit. But what happens is the first cell will be hidden but the second cell is not shown on click of edit button. This is because, when the setVisible(false) is called on a component, it is not redenered on the screen. So the placeholder is also missed on the rendered html.
<table>
<tr>
<td>
<div id="viewBlock">
Some content comes here
</div>
</td>
<td>
</td> DIV tag missing !
</tr>
</table>
Due to this, when you click on Edit button, the html code for second cell comes to the frontend but not rendered because of unavailability of parent place holder.
So we have set the getOutputMarkupPlaceholderTag property on both viewBlock and editBlock containers to true.
<table>
<tr>
<td>
<div id="viewBlock">
Some content comes here
</div>
</td>
<td>
<div id="editBlock">
</div> --No content. only place holder !
</td>
</tr>
</table>
