<td> element is lost during aj4 reRender of selectOneRadio, rich:tabPanel components
alexey.pryadko Sep 27, 2010 10:42 AMHi all!
In our project we use richfaces 3.3.3.
We've noticed that some elements are rendered not correct when a4j:xxx components are used.
Consider example:
<a4j:form id="mainForm">
<h:selectOneRadio value="#{demo.value1}">
<f:selectItems value="#{demo.values1}"/>
</h:selectOneRadio>
<rich:tabPanel>
<rich:tab label="Tab 1">
<h:outputText value="This is tab 1"/>
</rich:tab>
<rich:tab label="Tab 2">
<h:outputText value="This is tab 2"/>
</rich:tab>
<rich:tab label="Tab 3">
<h:outputText value="This is tab 3"/>
</rich:tab>
</rich:tabPanel>
<a4j:commandButton action="#{demo.submit}" reRender="mainForm" value="Save"/>
</a4j:form>
When the page is first loaded (rendered on server) we have the following html code for selectOneRadio component:
<table>
<tbody>
<tr>
<td>
<input type="radio" value="1" id="mainForm:j_id119:0" name="mainForm:j_id119"><label for="mainForm:j_id119:0"> item 1</label>
</td>
<td>
<input type="radio" value="2" id="mainForm:j_id119:1" name="mainForm:j_id119"><label for="mainForm:j_id119:1"> item 2</label>
</td>
<td>
<input type="radio" value="3" id="mainForm:j_id119:2" name="mainForm:j_id119" checked="checked"><label for="mainForm:j_id119:2"> item 3</label>
</td>
</tr>
</tbody>
</table>
And this for tabPanel:
<table cellspacing="0" cellpadding="0" border="0" style="height: 100%; width: 100%;">
<tbody>
<tr>
<td class="rich-tab-header rich-tab-inactive" onmouseout="RichFaces.outTab(this);" onmouseover="RichFaces.overTab(this);" id="mainForm:j_id122_lbl">Tab 1
</td>
</tr>
</tbody>
</table>
After click on a4j:commandButton we get another result for selectOneRadio:
<table>
<tbody>
<tr>
<input type="radio" name="mainForm:j_id119" id="mainForm:j_id119:0" value="1"><label for="mainForm:j_id119:0"> item 1</label>
<td>
<input type="radio" name="mainForm:j_id119" id="mainForm:j_id119:1" value="2"><label for="mainForm:j_id119:1"> item 2</label>
</td>
<td>
<input type="radio" checked="checked" name="mainForm:j_id119" id="mainForm:j_id119:2" value="3"><label for="mainForm:j_id119:2"> item 3</label>
</td>
</tr>
</tbody>
</table>
And for tabPanel:
<table cellspacing="0" cellpadding="0" border="0" style="height: 100%; width: 100%;">
<tbody>
<tr>Tab 1
</tr>
</tbody>
</table>
For both components we see that <td> tag is missed in the a4j rendered result.
As a result the look&feel becames actually broken, especially in IE.
As a workaround we use h:commandButton controls instead of a4j:commandButton, but it is not a solid solution since we have several realy 'heavy' pages which became nearly responsive.
Perhaps someone knows the proper solution?
Regards