Incorrect html generated by an AJAX reRender
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
