Ajax4JSF and Tomahawk data table, strange behaviour

Question

Hi,
I use the tomahawk data table to display a list of objects in my page with the following code snippet
<t:dataList value="#{userGallery.images}" var="image" layout="simple">
  <a4j:region>
    <t:htmlTag value="div" styleClass="imageEntry">
      <!-- This is the interesting part -->
      <h:outputLink value="gallery.faces">
        <f:param name="imageId" value="#{image.id}" />
        <t:div styleClass="imageWrapper image_#{image.id} #{image.inCart ? 'inCart' : ''}">
          <h:graphicImage value="#{ftp.apacheThumbnails}#{image.imageName}" alt="#{image.imageName}"/>
        </t:div>
      </h:outputLink>
      <!-- End of the interesting part -->
      <t:htmlTag value="div" styleClass="textWrapper">
        <t:htmlTag value="div" styleClass="actions">
          <a4j:commandLink reRender="imageList,shoppingChart" styleClass="addToCart" value="+#{msg.detailCart}" action="#{shoppingCart.addImageToCart}" rendered="#{!image.inCart}">
            <f:setPropertyActionListener target="#{shoppingCart.chosenImageId}" value="#{image.id}" />                                     
          </a4j:commandLink>
          <a4j:commandLink reRender="imageList,shoppingChart" styleClass="removeFromCart" value="-#{msg.detailCart}" action="#{shoppingCart.removeImageFromCart}" rendered="#{image.inCart}">
            <f:setPropertyActionListener target="#{shoppingCart.chosenImageId}" value="#{image.id}" />                                     
          </a4j:commandLink>     
        </t:htmlTag>
     </t:htmlTag>
   </t:htmlTag>
  </a4j:region>
</t:dataList>I have marked the interesting part of the text.
When i first access the page then everything is rendered as it should be.
When i now klick on the a4j:commandLink then i got the following result: (only the interesting snippet)
<div class="imageEntry">
  <a href="gallery.faces?imageId=2"/>
  <div class="imageWrapper image_2 inCart">
     ..... (output as it should be)
  </div>
  <div  class="textWrapper">
     .... (output as it should be)
  </div>
</div>So you see the link tag is closed to early, it should wrapp the complete <div class="imageWrapper> object.
Anybody know how to solve this?
Edited by: heissm on 19.05.2008 16:26 - shifting of the html tags

Answer 1

Hi,
I use the tomahawk data table to display a list of objects in my page with the following code snippet
<t:dataList value="#{userGallery.images}" var="image" layout="simple">
  <a4j:region>
    <t:htmlTag value="div" styleClass="imageEntry">
      <!-- This is the interesting part -->
      <h:outputLink value="gallery.faces">
        <f:param name="imageId" value="#{image.id}" />
        <t:div styleClass="imageWrapper image_#{image.id} #{image.inCart ? 'inCart' : ''}">
          <h:graphicImage value="#{ftp.apacheThumbnails}#{image.imageName}" alt="#{image.imageName}"/>
        </t:div>
      </h:outputLink>
      <!-- End of the interesting part -->
      <t:htmlTag value="div" styleClass="textWrapper">
        <t:htmlTag value="div" styleClass="actions">
          <a4j:commandLink reRender="imageList,shoppingChart" styleClass="addToCart" value="+#{msg.detailCart}" action="#{shoppingCart.addImageToCart}" rendered="#{!image.inCart}">
            <f:setPropertyActionListener target="#{shoppingCart.chosenImageId}" value="#{image.id}" />                                     
          </a4j:commandLink>
          <a4j:commandLink reRender="imageList,shoppingChart" styleClass="removeFromCart" value="-#{msg.detailCart}" action="#{shoppingCart.removeImageFromCart}" rendered="#{image.inCart}">
            <f:setPropertyActionListener target="#{shoppingCart.chosenImageId}" value="#{image.id}" />                                     
          </a4j:commandLink>     
        </t:htmlTag>
     </t:htmlTag>
   </t:htmlTag>
  </a4j:region>
</t:dataList>I have marked the interesting part of the text.
When i first access the page then everything is rendered as it should be.
When i now klick on the a4j:commandLink then i got the following result: (only the interesting snippet)
<div class="imageEntry">
  <a href="gallery.faces?imageId=2"/>
  <div class="imageWrapper image_2 inCart">
     ..... (output as it should be)
  </div>
  <div  class="textWrapper">
     .... (output as it should be)
  </div>
</div>So you see the link tag is closed to early, it should wrapp the complete <div class="imageWrapper> object.
Anybody know how to solve this?
Edited by: heissm on 19.05.2008 16:26 - shifting of the html tags