2 Replies Latest reply on Apr 23, 2010 5:29 AM by Stuart James

    Incorrect html generated by an AJAX reRender

    Stuart James Newbie

      My tool bar facelet consists of a set of standard links all of which are coded using the h:commandLink tag.  The template also contains a ui:insert that lets me add links to the tool bar depending on the context in which it is used. 

       

      extract of the facelet code


            <rich:toolBar height="34"
                          width="100%"
                          style="background: white" >
              <rich:toolBarGroup>
                <h:commandLink id="updateBookingLink"
                        title="#{bookingText.updateBooking}"
                        rendered="#{updateBookingLinkRendered eq null ? false : updateBookingLinkRendered}"
                        action="updateBooking">
                  <h:panelGrid columns="1" style="text-align: center">
                  <h:graphicImage value="/img/edit.png"
                                  height="24"
                                  width="24"
                                  styleClass="icon"/>
                  <h:outputText value="#{commonText['icon.update.hint']}" styleClass="iconHint"/>
                  </h:panelGrid>                           
                </h:commandLink>

            ...

            ... more tool bar actions
            ...

           <rich:toolBarGroup location="right">     

                <ui:insert name="contextActions"/>
              </rich:toolBarGroup>
            </rich:toolBar>

       

      The scenario that's causes me a problem is when my usage of this facelet defines the contextActions and passes in an a4j:commandLink as shown below

       

                  <ui:define name="contextActions">
                    <a4j:commandLink action="#{genericProcessManager.continueTask()}"
                                     title="#{bookingText['cancelBooking.proceedTooltip']}"
                                     reRender="cancelActions, priceAndCostPanel, generalPanel"
                                     limitToList="true"
                                     rendered="#{not empty reasonHome.cancellationReasons and bookingHome.cancellationChargesCaptured()}">
                      <h:panelGrid columns="1" style="text-align: center">
                        <h:graphicImage value="/img/proceed.png"
                                        height="24"
                                        width="24"
                                        styleClass="icon"/>
                        <h:outputText value="#{commonText['icon.proceed.hint']}" styleClass="iconHint"/>
                      </h:panelGrid>
                    </a4j:commandLink>
                  </ui:define>

       

      On clicking the a4j command link I reRender the contents of my tool bar to conditionally enable additional icon links on the tool bar. 

      The html code in the ajax response is generated incorrectly and none of my icons are clickable. 

       

      The incorrect html code is

       

      <td style="">
        <a onclick="if(typeof jsfcljs == 'function')
          {jsfcljs(document.getElementById('form'),{'form:j_id138:taskCompleteLink':'form:j_id138:taskCompleteLink','executeQuery':'true'},'');}
          return false" title="Continue task" href="#" id="form:j_id138:taskCompleteLink">
        </a>
        <table style="text-align: center;">
         <tbody><tr><td>
          <img src="/Application/img/complete.png" width="24" height="24">
         </td></tr><tr><td>
         <span>Complete</span>

       

      as you can see the ajax rerender puts the <img> tag outside the <a> tag.  I've also tried this by putting the a4j:commandLink inside the facelet with the same outcome.  On a full page render the html is generated correctly and all my displayed icon links work.

       

      Any idea why?  Is this a known ajax rerender issue?  I don't really want to change it to a h:commandLink so if you have a tip to get around this problem I'd appreciate it.

       

      Version info

      Rich  faces 3.3.1

      Seam 2.2.0

      Browser Firefox3.6.3 and IE 8

        • 1. Re: Incorrect html generated by an AJAX reRender
          Ilya Shaikovsky Master

          your code is not valid according to w3c. <a> should not contains table inside, so it's corrected by TIDY filter. Two ways:

          • remove panelGrid from link (preferable)
          • change parser to NEKO or NONE. - this could cause page to be broken after Ajax updates if you using not w3c complaint markup. but such corrections will not be made.
          • 2. Re: Incorrect html generated by an AJAX reRender
            Stuart James Newbie

            Thanks Ilya.  I changed my code as per your suggestion placing the commandLink within the panelGrid and it renders correctly after AJAX.

             

            <h:panelGrid columns="1"  style="text-align: center">

                 <h:commandLink id="updateBookingLink"
                                           title="#{bookingText.updateBooking}"
                                            rendered="#{updateBookingLinkRendered eq null ? false :  updateBookingLinkRendered}"
                                            action="updateBooking">

                        <h:graphicImage  value="/img/edit.png"
                                        height="24"
                                         width="24"
                                        styleClass="icon"/>

                 </h:commandLink>

                 <h:outputText value="#{commonText['icon.update.hint']}"  styleClass="iconHint"/>
            </h:panelGrid>