6 Replies Latest reply on Oct 11, 2010 7:52 AM by jeric

    Validation appears/disappears in ModalPanel (Fixed + Solution)

    jeric

      Hi everyone!

       

      I'm experiencing strange behaviour while validating a regular inputbox with a really standard validator. Everything works fine (validation wise), but the validation message only briefly shows and then disappears

       

      I have tried alot of different approaches, but they all resulted in either the same behaviour, or no validation message at all...

       

      - I'm using RichFaces 4.0 / JSF 2.0 on a Tomcat 6.0 application server.

      - The panel is outside the 'main' form, and is shown whenever a user presses the appropriate a4j:commandLink

       

      The code (pretty straightforward):

       

      <rich:modalPanel id="panel" width="350" height="130">  
       
       
        <f:facet name="header">  
       
          <h:outputText value="Track Ordernumber" />  
        </f:facet>  
      
      
        <f:facet name="controls">  
          <h:panelGroup>  
            <h:graphicImage value="/images/close.png" id="hidelink"/>  
            <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick"/>  
          </h:panelGroup>  
        </f:facet>  
      
      
        <a4j:form id="addOrderForm" >  
          <h:panelGrid columns="2" styleClass="panelGrid" columnClasses="panelGridLabel, panelGridData">  
      
      
            <h:outputText value="Ordernumber"/>  
            <h:inputText id="orderNumberInput" value="#{dashBoardBean.orderNumber}">  
              <f:validateRegex pattern="[0-9]{12}"/>  
            </h:inputText>  
      
      
            <h:outputText value="Ou"/>  
            <h:selectOneRadio value="#{dashBoardBean.selectedOu}" style="font-size:10px;">  
              <f:selectItems value="#{dashBoardBean.ous}"/>  
            </h:selectOneRadio>  
      
      
            <a4j:commandButton value="Save" action="#{dashBoardBean.addOrderNumber}">  
              <a4j:support event="onclick" reRender="orders"/>  
            </a4j:commandButton>  
      
      
            <a4j:outputPanel ajaxRendered="true">  
              <rich:message for="orderNumberInput"/>  
            </a4j:outputPanel>  
      
      
          </h:panelGrid>  
        </a4j:form>  
      </rich:modalPanel>
      
      

       

      Thanks in advance for any help :-)

        • 1. Re: Validation appears/disappears in ModalPanel
          ilya_shaikovsky

          I'm not sure about

          - I'm using RichFaces 4.0 / JSF 2.0 on a Tomcat 6.0 application server.

          a4j:form and a4j:support are not present there...

           

          But even if talk about 3.3.3 - the answer is simple - a4j:command and nested support inside - should not be used. That's because two concurrent requests will be sent. And in your case  - first requests updates the messages with new content  and second - erases results from previous.

          • 2. Re: Validation appears/disappears in ModalPanel
            jeric

            Hi Ilya,

             

            Thanks for your reply, and you're right, the 4.0 was a typo, I'm indeed using RichFaces 3.3.3 together with JSF 2.0!

             

            Instead of the <a4j:commandButton>, I tried using the <h:commandButton>, but that resulted in a submit request that closed my modalPanel...?

                  <h:commandButton value="Save" action="#{dashBoardBean.addOrderNumber}">  
                    <a4j:support event="onclick" reRender="orders"/>  
                  </h:commandButton> 

            What I basically wish to achieve is the following:

             

            - Person clicks the 'Add Order' button

            - Person fills in an ordernumber (should be 12 numbers)

            - Person clicks save (which instantly adds the number to a <rich:dataTable> (this is what I used the <a4j:support event="onclick" reRender="orders" /> for

             

            Another thing I tried was to completely remove the reRender part. I got the same problem -- Error is shown, but only for a little moment

             

            Thanks to your explanation I understand why my code doesn't work the way I want though, but I'm not sure what I should do to 'fix' it... Perhaps you've got an idea?

             

            Thanks!

            • 3. Re: Validation appears/disappears in ModalPanel
              ilya_shaikovsky

              let's from the beginning return to the basics. this:

              <h:commandButton value="Save" action="#{dashBoardBean.addOrderNumber}"> 
              <a4j:support event="onclick" reRender="orders"/> 
              </h:commandButton>

              will also not works fine and because of the same reason.

               

              Use just a4j:commandButton without any supports inside. It should just works as you need submitting fom via ajax and calling your business actions. use button's reRender attribute instead of placing in separate a4j:support.

              • 4. Re: Validation appears/disappears in ModalPanel
                jeric

                Hi Ilya,

                 

                I tried this suggestion, but still got the same behaviour. I created another page with just that modalpanel though, and here it seemed to work. I noticed that another modalpanel was the cause, one that has a <rich:progressBar />. Once I removed this item, it seemed to work fine, I'll just have to find a new way to display progress in a modal panel now

                 

                I'm not sure why I used a support tag inside my a4j:command instead of using the reRender property of the command itself (I actually did use this property on my a4j:commandLinks), but I guess I'm never too old to learn

                 

                Thanks!

                • 5. Re: Validation appears/disappears in ModalPanel
                  ilya_shaikovsky

                  seems ProgressBar requests causes automatically rendered zones to be updated (I believed that it should not ) try to add limittolist=true to progressBar.

                  • 6. Re: Validation appears/disappears in ModalPanel
                    jeric

                    Hi Ilya,

                     

                    This solved my problem! I now have validation working in the 'input modalpanel', while the 'loading modalpanel' shows the progressBar, exactly as I wanted it to

                     

                    Here is a snippet of how it works right now, perhaps it can be of use for other people! The code might need a bit of work, and I didn't include backing bean code (but that's pretty trivial, really). Also, it might not be the neatest code, so feel free to refactor :

                     

                    <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
                    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
                    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
                    <%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
                    <%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
                    
                    <f:view>
                     <html>
                       <head>
                        <a4j:loadStyle src="resource:///css/style.css" />
                       </head>
                      <body>
                       <a4j:form>
                        <div class="actions">
                    
                         <a4j:commandLink action="#{dashBoardBean.refreshDashBoard}" id="load" reRender="loadPanel, orders" style="padding-right: 8px;">
                          <h:graphicImage value="/images/reload.png" styleClass="imageButton"/>
                          <rich:componentControl for="loadPanel" attachTo="load" operation="show" event="onclick"/>
                          <rich:toolTip value="Reload dashboard" />
                         </a4j:commandLink>
                    
                         <a4j:commandLink id="link" >
                          <h:graphicImage value="/images/add.png" styleClass="imageButton" />
                          <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
                          <rich:toolTip value="Add order" />
                         </a4j:commandLink>
                    
                        </div>
                       </a4j:form>
                    
                       <rich:modalPanel id="panel" width="350" height="130" keepVisualState="true" >
                    
                        <f:facet name="header">
                         <h:outputText value="Track Ordernumber" />
                        </f:facet>
                    
                        <f:facet name="controls">
                         <h:panelGroup>
                          <h:graphicImage value="/images/close.png" id="hidelink" />
                          <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick" />
                         </h:panelGroup>
                        </f:facet>
                    
                        <a4j:form id="addOrderForm" >
                         <h:panelGrid columns="2" styleClass="panelGrid" columnClasses="panelGridLabel, panelGridData">
                    
                          <h:outputText value="Ordernumber"/>
                          <h:inputText id="orderNumberInput" value="#{dashBoardBean.orderNumber}" maxlength="12" required="true" >
                           <f:validateRegex pattern="[0-9]{12}"/>
                          </h:inputText>
                    
                          <h:outputText value="Ou"/>
                          <h:selectOneRadio value="#{dashBoardBean.selectedOu}" style="font-size:10px;">
                           <f:selectItems value="#{dashBoardBean.ous}" />
                          </h:selectOneRadio>
                    
                          <a4j:commandButton value="Save" action="#{dashBoardBean.addOrderNumber}" reRender="orders" />
                          <rich:message for="orderNumberInput" />
                    
                         </h:panelGrid>
                        </a4j:form>
                       </rich:modalPanel>
                    
                       <rich:modalPanel id="loadPanel" width="370" height="40">
                        <h:form>
                         <a4j:outputPanel id="progressPanel" >
                          <h:panelGrid columns="2" styleClass="panelGridLabel, panelGridData">
                           <h:outputText value="Updating Orders..." />
                           <rich:progressBar value="#{dashBoardBean.currentValue}"
                           interval="200" label="#{dashBoardBean.currentValue} %"
                           minValue="-1" maxValue="100" limitToList="true"
                           reRenderAfterComplete="loadPanel"/>
                          </h:panelGrid>
                         </a4j:outputPanel>
                        </h:form>
                       </rich:modalPanel>
                    
                      </body>
                     </html>
                    </f:view>
                    

                    <

                    page language="java" contentType="text/html; charset=ISO-8859-1"

                    pageEncoding="ISO-8859-1"%>
                    <%@
                    taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
                    <%@
                    taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
                    <%@
                    taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
                    <%@
                    taglib uri="http://richfaces.org/rich" prefix="rich"%>
                    <
                    f:view>
                    <html>
                    <head>
                    <a4j:loadStyle src="resource:///css/style.css" />
                    <link rel="shortcut icon" href="<h:outputText value="#{facesContext.externalContext.requestContextPath}/npi.ico" />" type="image/x-icon" />
                    </head>
                    <body>
                    <a4j:form>
                    <div class="actions">
                    <a4j:commandLink action="#{dashBoardBean.refreshDashBoard}" id="load" reRender="loadPanel, orders" style="padding-right: 8px;">
                    <h:graphicImage value="/images/reload.png" styleClass="imageButton"/>
                    <rich:componentControl for="loadPanel" attachTo="load" operation="show" event="onclick"/>
                    <rich:toolTip value="Reload dashboard" />
                    </a4j:commandLink>
                    <a4j:commandLink id="link" >
                    <h:graphicImage value="/images/add.png" styleClass="imageButton" />
                    <rich:componentControl for="panel" attachTo="link" operation="show" event="onclick"/>
                    <rich:toolTip value="Add order" />
                    </a4j:commandLink>
                    </div>
                    </a4j:form>
                    <rich:modalPanel id="panel" width="350" height="130" keepVisualState="true" >
                    <f:facet name="header">
                    <h:outputText value="Track Ordernumber" />
                    </f:facet>
                    <f:facet name="controls">
                    <h:panelGroup>
                    <h:graphicImage value="/images/close.png" id="hidelink" />
                    <rich:componentControl for="panel" attachTo="hidelink" operation="hide" event="onclick" />
                    </h:panelGroup>
                    </f:facet>
                    <a4j:form id="addOrderForm" >
                    <h:panelGrid columns="2" styleClass="panelGrid" columnClasses="panelGridLabel, panelGridData">
                    <h:outputText value="Ordernumber"/>
                    <h:inputText id="orderNumberInput" value="#{dashBoardBean.orderNumber}" maxlength="12" required="true" >
                    <f:validateRegex pattern="[0-9]{12}"/>
                    </h:inputText>
                    <h:outputText value="Ou"/>
                    <h:selectOneRadio value="#{dashBoardBean.selectedOu}" style="font-size:10px;">
                    <f:selectItems value="#{dashBoardBean.ous}" />
                    </h:selectOneRadio>
                    <a4j:commandButton value="Save" action="#{dashBoardBean.addOrderNumber}" reRender="orders" />
                    <rich:message for="orderNumberInput" />
                    </h:panelGrid>
                    </a4j:form>
                    </rich:modalPanel>
                    <rich:modalPanel id="loadPanel" width="370" height="40">
                    <h:form>
                    <a4j:outputPanel id="progressPanel" >
                    <h:panelGrid columns="2" styleClass="panelGridLabel, panelGridData">
                    <h:outputText value="Updating Orders..." />
                    <rich:progressBar value="#{dashBoardBean.currentValue}"
                    interval="200" label="#{dashBoardBean.currentValue} %"
                    minValue="-1" maxValue="100" limitToList="true"
                    reRenderAfterComplete="loadPanel"
                    />
                    </h:panelGrid>
                    </a4j:outputPanel>
                    </h:form>
                    </rich:modalPanel>
                    </body>
                    </html>
                    </
                    f: