'required=true' is preventing ajax show/hide functionality

[jaizen]

Hi

I'm trying to use the rendered attribute on an input component to show or hide the component based on the selection value of a radio button. But the components dont show up unless the 'required' components have values entered. Is there anyway I can keep validations on and still get this 'show/hide' functionality to work?

This is the Radio Button input:

<s:decorate template="layout/edit.xhtml">
<ui:define name="label">Party Type</ui:define>
<h:selectOneRadio id="partyType" value="#{partyHome.temp}">
     <f:selectItem itemValue="PER" itemLabel="Person"/>
     <f:selectItem itemValue="ORG" itemLabel="Organization"/>

     <a:support event="onchange" reRender="partyDet"/>
     <a:support event="onblur" reRender="partyTypeField" bypassUpdates="true" ajaxSingle="true"/>                
</h:selectOneRadio>
</s:decorate>

This is the Component that I am trying to show or hide:

<h:panelGrid id="partyDet" columns="1" > 
<s:decorate id="firstnameField" template="layout/edit.xhtml" rendered="#{partyHome.temp == 'PER'}">
     <ui:define name="label">Firstname</ui:define>
     <h:inputText size="25" maxlength="25" value="#{personHome.instance.firstname}">
          <a:support event="onblur" reRender="firstnameField" bypassUpdates="true" ajaxSingle="true"/>
     </h:inputText>
</s:decorate>
<s:decorate id="orgNameField" template="layout/edit.xhtml" rendered="#{partyHome.temp == 'ORG'}">
     <ui:define name="label">Org name</ui:define>
     <h:inputText id="orgName" maxLength="25" value="#{organizationHome.instance.orgName}">
          <a:support event="onblur" reRender="orgNameField" bypassUpdates="true" ajaxSingle="true"/>
     </h:inputText>
</s:decorate>
</h:panelGrid>

I have other components in the form that has 'required=true' and if these fields are not filled in BEFORE the radio button selection is made, then the 'partyDet' panelGrid doesnt work the way. If I remove all the 'required' attribute from all the components, then whenever I click on the radio button, then the corresponding components work correctly.

The logs show this error whenever I click on the radio button before the required fields are filled:

[lifecycle] WARNING: FacesMessage(s) have been enqueued, but may not have been displayed.

sourceId=contactInfo:contactTypeField:contactType[severity=(ERROR 2), summary=(value is required), detail=(value is required)]

I tried looking through the forum for this specific problem, could find it. Any help is appreciated.

Thanks

J

[nbelaevski]

Hi,

Try setting immediate="true" for support.

[jaizen]

Hi Nick,

I set immediate="true" to the a4j:support in selectOneRadio component but now the panel that is controlled by the radio button inputs never show, even when all the required fields are filled. The value of the radio button field is showing is null which is why the panel is not rendering. I guess the update model phase is bypassed? Do you know any other solution?

Thanks

J

[ilya_shaikovsky]

remove immediate from support and change original code to

<h:selectOneRadio id="partyType" value="#{partyHome.temp}">
     <f:selectItem itemValue="PER" itemLabel="Person"/>
     <f:selectItem itemValue="ORG" itemLabel="Organization"/>
 
     <a:support event="onchange" reRender="..." ajaxSingle="true"/>

</h:selectOneRadio>
...

[jaizen]

Brilliant! It worked! But whats strange is that this is what I had tried first. But it didn't work and instead threw a

org.jboss.seam.ConcurrentRequestTimeoutException: Concurrent call to conversation exception. So I set eventsQueue to default and tried a bunch of other stuff. Anyways, its working now. Thanks a bunch guys.

But another thing thats bothering me is that after I select an option from radio button which results in showing 6 other inputs, as I try to 'tab' my way to these components, the cursor goes back up to the first component in my page... as I keep tabbing, it moves through a few components and then jumps right back at my first component. The jump always happen when i tab to components AFTER the radio button. I'm using Safari 4.05

Any suggestions will be appreciated!

Thanks

J

[ilya_shaikovsky]

It's not worked because two events blur and change was fired and two concurent ajax request was sent.

about tabbing. if you want need to set focus - check focus attribute in ajax support.