4 Replies Latest reply on Dec 1, 2010 3:55 AM by alexey.pryadko

    <td> element is lost during aj4 reRender of selectOneRadio, rich:tabPanel components

    alexey.pryadko

      Hi 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