8 Replies Latest reply on Oct 29, 2007 6:52 PM by Igor Dikhtyaruk

    required=true and Ajax requests

    Igor Dikhtyaruk Newbie

      I have an output panel where all the controls are located. Some of the input fields should have validation required="true" (and some other validations).
      I have radio button on this panel, which drives whether to hide or show those input fields.
      The problem is: every time Ajax request is fired (user clicks radio button) the validation of the input fields stops the Ajax request to re-render the panel.
      What I want is to have all the validations working only when a user explicitly submits the form.
      I tried to use <a4j:region> around just that h:selectOneRadio, but that didn't help as i need to render the whole panel.
      I would appreciate if anyone could help me.
      code:

      <h:form>
       <a4j:outputPanel layout="block" id="thePage">
       <h:panelGroup rendered="${field.answer.required}">
      
       <h:inputText value="${field.answer.text}"
       size="${field.properties.length}"
       maxlength="${field.properties.maxlength}"
       rendered="${#bean.someLogic}"
       required="${field.properties.optional != 'true'}"
       requiredMessage="Please complete ${field.subject}">
       </h:inputText>
      
       <a4j:region>
       <a4j:status id="status" onstart="Richfaces.showModalPanel('waitPage')"/>
       <h:selectOneRadio
       value="${field.answer.selectedValue}"
       layout="${field.properties.layout}">
       <f:selectItems value="#{field.answer.options}"/>
       <a4j:support event="onclick"
       action="#{handler[onRuleTrigger]}"
       eventsQueue="selectOneRadio"
       ignoreDupResponses="true"
       rendered="#{field.ruleTrigger == true}"
       disableDefault="true"
       oncomplete="Richfaces.hideModalPanel('waitPage')"
       reRender="thePage" />
       </h:selectOneRadio>
       </a4j:region>
      
       </h:panelGroup>
       </a4j:outputPanel>
       <p align="center">
       <h:commandButton id="submitQuestionnaire" action="#{handler[onSubmit]}" type="Submit" rendered="#{onSubmit ne null}"/>
       </p>
      </h:form>
      


        • 1. Re: required=true and Ajax requests
          Ilya Shaikovsky Master

          actually with a4j:region all the controls not inside region will not be processed on the first 5 phases. So no errors should occurs.

          • 2. Re: required=true and Ajax requests
            Igor Dikhtyaruk Newbie

            Hi Ilya,

            sorry, I have misleaded you. Looks like that is a bug with <ui:repeat> loop. That code snippet is actually inside of <ui:repeat> block. In this case Ajax onclick event causes validation phase to process.
            When I tried <c:forEah> loop the same code works well. Do you know if this is a known bug?

            thanks,
            Igor

            • 3. Re: required=true and Ajax requests
              Igor Dikhtyaruk Newbie

              here is

              <ui:composition xmlns="http://www.w3.org/1999/xhtml"
               xmlns:ui="http://java.sun.com/jsf/facelets"
               xmlns:h="http://java.sun.com/jsf/html"
               xmlns:c="http://java.sun.com/jstl/core"
               xmlns:s="http://jboss.com/products/seam/taglib"
               xmlns:f="http://java.sun.com/jsf/core"
               xmlns:a4j="http://richfaces.org/a4j"
               xmlns:rich="http://richfaces.org/rich">
              
               <rich:separator height="1" />
               <a4j:outputPanel ajaxRendered="true">
               <h:messages style="color:red" />
               </a4j:outputPanel>
              
              <h1>Form with c:forEach</h1>
              <h:form id="forEach">
               <a4j:outputPanel layout="block" id="thePage">
               <c:forEach items="#{testQuestionnaireBean.fields}" var="field">
               <h:panelGroup rendered="${testQuestionnaireBean.fieldRequired == 'true'}">
              
               <h:inputText value="${field.answer.text}"
               rendered="${field.answer.required}"
               required="true"
               requiredMessage="Please complete ${field.subject}">
               </h:inputText>
              
               <a4j:region>
               <h:selectOneRadio value="${field.answer.required}">
               <f:selectItem itemValue="true" itemLabel="Yes"/>
               <f:selectItem itemValue="false" itemLabel="No"/>
               <a4j:support event="onclick"
               action="#{testQuestionnaireBean.doBlah}"
               eventsQueue="selectOneRadio"
               ignoreDupResponses="true"
               disableDefault="true"
               reRender="thePage" />
               </h:selectOneRadio>
               </a4j:region>
              
               </h:panelGroup>
               </c:forEach>
              
               </a4j:outputPanel>
               <p align="center">
               <h:commandButton value="submit" id="submitQuestionnaire" action="#{testQuestionnaireBean.submit}" type="Submit"/>
               </p>
              </h:form>
              
              <br/>
              
              <h1>Form with ui:repeat</h1>
              
              <h:form id="uiRepeat">
              
               <a4j:outputPanel layout="block" id="thePage2">
               <ui:repeat value="#{testQuestionnaireBean.fields}" var="field">
               <h:panelGroup rendered="${testQuestionnaireBean.fieldRequired == 'true'}">
              
               <h:inputText value="${field.answer.text}"
               rendered="${field.answer.required}"
               required="true"
               requiredMessage="Please complete ${field.subject}">
               </h:inputText>
              
               <a4j:region>
               <h:selectOneRadio value="${field.answer.required}">
               <f:selectItem itemValue="true" itemLabel="Yes"/>
               <f:selectItem itemValue="false" itemLabel="No"/>
               <a4j:support event="onclick"
               action="#{testQuestionnaireBean.doBlah}"
               eventsQueue="selectOneRadio"
               ignoreDupResponses="true"
               disableDefault="true"
               reRender="thePage2" />
               </h:selectOneRadio>
               </a4j:region>
              
               </h:panelGroup>
               </ui:repeat>
              
               </a4j:outputPanel>
               <p align="center">
               <h:commandButton value="submit" id="submitQuestionnaire" action="#{testQuestionnaireBean.submit}" type="Submit"/>
               </p>
              </h:form>
              
               <rich:separator style="padding-top:10px" height="1" />
              </ui:composition>
              


              • 4. Re: required=true and Ajax requests
                Igor Dikhtyaruk Newbie

                Is there a solution for ui:repeat (I would prefer it over c:forEach)?

                • 5. Re: required=true and Ajax requests
                  Igor Dikhtyaruk Newbie

                  Another example, now with rich:dataTable:

                  <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                   xmlns:ui="http://java.sun.com/jsf/facelets"
                   xmlns:h="http://java.sun.com/jsf/html"
                   xmlns:c="http://java.sun.com/jstl/core"
                   xmlns:s="http://jboss.com/products/seam/taglib"
                   xmlns:f="http://java.sun.com/jsf/core"
                   xmlns:a4j="http://richfaces.org/a4j"
                   xmlns:rich="http://richfaces.org/rich">
                  
                   <a4j:outputPanel ajaxRendered="true">
                   <h:messages style="color:red" />
                   </a4j:outputPanel>
                  
                  <h1>Form </h1>
                  <h:form id="questionnaire">
                   <rich:dataTable value="#{testQuestionnaireBean.fields}" var="field" id="thePage">
                   <rich:columnGroup>
                   <rich:column>
                   <h:inputText value="${field.answer.text}"
                   rendered="${field.answer.required}"
                   required="true"
                   requiredMessage="Please complete me!">
                   </h:inputText>
                   </rich:column>
                   <rich:column>
                   <a4j:region>
                   <h:selectOneRadio value="${field.answer.required}">
                   <f:selectItem itemValue="true" itemLabel="Yes"/>
                   <f:selectItem itemValue="false" itemLabel="No"/>
                   <a4j:support event="onclick"
                   action="#{testQuestionnaireBean.doBlah}"
                   eventsQueue="selectOneRadio"
                   ignoreDupResponses="true"
                   disableDefault="true"
                   reRender="thePage" />
                   </h:selectOneRadio>
                   </a4j:region>
                   </rich:column>
                   </rich:columnGroup>
                   </rich:dataTable>
                   <p/>
                   <h:commandButton value="submit" id="submitQuestionnaire" action="#{testQuestionnaireBean.submit}" type="Submit"/>
                  </h:form>
                  </ui:composition>
                  


                  • 6. Re: required=true and Ajax requests
                    Igor Dikhtyaruk Newbie

                    Parni, chto zh vy molchite? Skazhite hotya by, chto Ajax does not work with "repeat" components ili chto-to v etom rode.

                    • 7. Re: required=true and Ajax requests
                      Sergey Smirnov Master

                      a4j:region has no chance to work inside the dataTable. Try to use immediate="true" instead.

                      • 8. Re: required=true and Ajax requests
                        Igor Dikhtyaruk Newbie

                        Privet, Sergey.
                        Do you mean use it in <a4j:support>?
                        I can't use immediate="true" as I want to pass a value for the h:selectOneRadio for anaysis (as I inderstand immediate=true will cause the action method to be called before values assigned).
                        BTW, my original request was related to <ui:repeat> (same as <a4j:repeat>). a4j:region is not working inside.
                        Thanks,
                        Igor