4 Replies Latest reply on Jan 23, 2008 10:42 AM by Sergey Smirnov

    commandLink with nested rich panel broken after re-rendering

    Andrej Kovcic Newbie

      Hi,

      I have a following simple example:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:ui="http://java.sun.com/jsf/facelets"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:s="http://jboss.com/products/seam/taglib"
       xmlns:rich="http://richfaces.ajax4jsf.org/rich"
       xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
      <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <title>Test</title>
      </head>
      
      <body>
       <rich:panel>
       <a4j:form>
       <h:inputText value="#{testBean.value}"></h:inputText>
       <br/>
       <a4j:commandLink reRender="linkPanel">
       <h:outputText value="Submit" />
       </a4j:commandLink>
       </a4j:form>
       </rich:panel>
       <rich:panel id="linkPanel">
       <a4j:form>
       <a4j:commandLink action="#{testBean.clear}" reRender="outputText">
       <rich:panel style="width: 50px; text-align: center;">Clear</rich:panel>
       </a4j:commandLink>
       <br/>
       <h:outputText id="outputText" value="Value is: #{testBean.value}" />
       </a4j:form>
       </rich:panel>
      </body>
      </html>
      



      import org.jboss.seam.ScopeType;
      import org.jboss.seam.annotations.Name;
      import org.jboss.seam.annotations.Scope;
      
      
      @Name("testBean")
      @Scope(ScopeType.SESSION)
      public class TestBean {
       private String value = "";
      
      
       public void clear(){
       value = "";
       }
      
       public String getValue() {
       return value;
       }
      
       public void setValue(String value) {
       this.value = value;
       }
      }
      


      When above page is loaded the 'Clear' link works ok.
      After typing some text and clicking 'Submit' link, which re-render 'linkPanel', the 'Clear' link is broken.

      When looking at generated HTML in the second case tag has no body:

      <a id="j_id8:j_id9" href="#" name="j_id8:j_id9" onclick="A4J.AJAX.Submit('_viewRoot','j_id8',event,{'parameters':{'j_id8:j_id9':'j_id8:j_id9'} ,'actionUrl':'/bex/test.seam?javax.portlet.faces.DirectLink=true'} );return false;"/>
      <div id="j_id8:j_id10" class="dr-pnl rich-panel" style="width: 50px; text-align: center;">
      <div id="j_id8:j_id10_body" class="dr-pnl-b rich-panel-body">Clear</div>
      </div>
      


      Looks like nested rich:panel is rendered outside tag. After refreshing the page link (html) is ok.

      Is this a bug or some restriction of commandLink?

      Thanks

        • 1. Re: commandLink with nested rich panel broken after re-rende
          Sergey Smirnov Master

          you have to define the id for the commandLink explicitly. if you re-render it together with a4j:form, a4j:form should have the id explicitly defined as well.

          • 2. Re: commandLink with nested rich panel broken after re-rende
            Andrej Kovcic Newbie

             

            "SergeySmirnov" wrote:
            you have to define the id for the commandLink explicitly. if you re-render it together with a4j:form, a4j:form should have the id explicitly defined as well.


            Thanks for quick reply.
            I added id's ans still have the same behavior. Here is the changed page:

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:h="http://java.sun.com/jsf/html"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:s="http://jboss.com/products/seam/taglib"
             xmlns:rich="http://richfaces.ajax4jsf.org/rich"
             xmlns:a4j="https://ajax4jsf.dev.java.net/ajax">
            <head>
             <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
             <title>Test</title>
            </head>
            
            <body>
             <rich:panel>
             <a4j:form id="form1Id">
             <h:inputText value="#{testBean.value}"></h:inputText>
             <br/>
             <a4j:commandLink id="link1Id" reRender="linkPanel">
             <h:outputText value="Submit" />
             </a4j:commandLink>
             </a4j:form>
             </rich:panel>
             <rich:panel id="linkPanel">
             <a4j:form id="form2Id">
             <a4j:commandLink id="link2Id" action="#{testBean.clear}" reRender="outputText">
             <rich:panel id="innerPanelId" style="width: 50px; text-align: center;">Clear</rich:panel>
             </a4j:commandLink>
             <br/>
             <h:outputText id="outputText" value="Value is: #{testBean.value}" />
             </a4j:form>
             </rich:panel>
            </body>
            </html>
            


            Any other advice?

            • 3. Re: commandLink with nested rich panel broken after re-rende
              Andrej Kovcic Newbie

              One more observation, if I put text instead rich:panel within problematic commandLink tag, the link is not broken after re-render:

               <rich:panel id="linkPanel">
               <a4j:form>
               <a4j:commandLink action="#{testBean.clear}" reRender="outputText">
               <h:outputText value="Clear" />
               </a4j:commandLink>
               <br/>
               <h:outputText id="outputText" value="Value is: #{testBean.value}" />
               </a4j:form>
               </rich:panel>
              
              


              Also it is fine with nested h:graphicImage:

               <rich:panel id="linkPanel">
               <a4j:form id="form2Id">
               <a4j:commandLink id="link2Id" action="#{testBean.clear}" reRender="outputText">
               <h:graphicImage value="img/button.gif" />
               </a4j:commandLink>
               <br/>
               <h:outputText id="outputText" value="Value is: #{testBean.value}" />
               </a4j:form>
               </rich:panel>
              


              • 4. Re: commandLink with nested rich panel broken after re-rende
                Sergey Smirnov Master

                Do you know, that according to the w3c standard, you can put block content inside the inline context? In your case, you wrap block < div > (panel) inside the < a > (commandLink) . Tidy Filter that is used by default for all Ajax response, just correct your code to make it standard compliant. Specifically, it close < a > before the < div >. So, the link is not broken. It just closes before the panel.

                Read "5.6. Filter Configuration" about the meaning of the correction and how to turn it off.
                Remember that during the Ajax DOM update, browser does not correct the code before insert instead of regular page loading. So, it might cause glitches if your code is not correct.