1

We have this simple structure

<apex:pageBlock>   
  <apex:pageblocksection title="Personal Details">
    <apex:inputfield value="{!acc.Name}" />
    <apex:inputfield value="{!acc.Custom1__c}" id="re1"  />        
    <apex:inputfield value="{!acc.Custom2__c}" id="re2" required="true" />
  </apex:pageblocksection>
</apex:pageBlock>

Now I want to hide the (required) re2 inputfield if re1 is equal to 'test', but do not want to rerender the other fields.

However, if I wrap the apex:inputField in an outputpanel with an id like the following example, and then rerender that thing, then the inputfield becomes really ugly. How to do this?

<apex:pageBlock>   
  <apex:pageblocksection title="Personal Details">
    <apex:inputfield value="{!acc.Name}" />
    <apex:inputfield value="{!acc.Custom1__c}" id="re1" onchange="checkRe2Visibility();"  />        
    <apex:outputPanel id="wrapper">        
      <apex:inputfield value="{!acc.Custom2__c}" id="re2" rendered="{!acc.Custom1__c != 'test'}" required="true" />
    </apex:outputPanel>
  </apex:pageblocksection>
</apex:pageBlock>
<apex:actionFunction reRender="wrapper" name="checkRe2Visibility"/>

Thanks!

Improve this question
5
  • Did you try rerender it without wrapping in outputPanel ? after which action you are rerendering it? can you post the related controller code as well?
    – highfive
    Sep 8, 2015 at 15:23
  • what user action should trigger the rerender of re2? Some commandButton, onchange event for re1, something else?
    – cropredy
    Sep 8, 2015 at 17:29
  • @highfive yes we tried, but because you have to rerender a parent of the inputfield (indeed, a rerender will only rerender the children of the rerendered tag, not evaluate the render="" attribute of the tag itself) we would have to rerender the whole pageblock, which is nog what we want.
    – Willem Mulder
    Sep 9, 2015 at 7:35
  • @crop1645 anything can trigger the rerender. In our case, it is an actionFunction, but it shouldn't make any difference. I've added it in to make the example more complete though.
    – Willem Mulder
    Sep 9, 2015 at 7:35
  • Willem -- I played around with this a while and then realized how I worked around it in the past. (1) remove the required= attribute but 2) style re2 with the red bar (many google links on how to do this), and 3) have the controller test re2's required state when a 'save' action method executes. I had the same issues as you with styling re1 if it were wrapped inside of an actionRegion (so as to only xmit re1). If you don't need to use pageBlock styling, problem gets easier.
    – cropredy
    Sep 10, 2015 at 1:27

3 Answers 3

Reset to default
1

I think the best approach here would be to use javascript to simply hide/show the input field.

<script>
function checkRE1(){
    var re1=document.getElementById('{!$Component.re1}');
    if (re1.value=='test'){
        document.getElementById('{!$Component.re2}').style.dispaly="none"
    }
    else{
        document.getElementById('{!$Component.re2}').style.dispaly="inline"
    }
}
</script>
<apex:pageBlock>
<apex:pageblocksection title="Personal Details">
    <apex:inputfield value="{!acc.Name}" />
    <apex:inputfield value="{!acc.Custom1__c}" id="re1" onchange="checkRE1();""/>
    <apex:inputfield value="{!acc.Custom2__c}" id="re2"/>
  </apex:pageblocksection>
</apex:pageBlock>
Improve this answer
6
  • That's a good point. (and I didn't know about the $Component.re2: thanks for pointing that out! :-)) Yet, in reality the re2 field is required, so we can't just Javascript-hide it, because then the validation fails. We'll have to really 'hide' it from the Visualforce perspective. You could not have known, sorry for not mentioning that: I updated the post to reflect that now.
    – Willem Mulder
    Sep 9, 2015 at 12:28
  • @WillemMulder - the required= attribute value (true/false) can be set by a VF formula expression
    – cropredy
    Sep 9, 2015 at 19:44
  • @crop1645 but that evaluates only on page render, right? It won't set required to false just because a tag gets hidden by javascript...
    – Willem Mulder
    Sep 9, 2015 at 21:15
  • correct -- I offered it as a suggestion to deal with switching off the required= attribute if you were going to use a combined JS + rerender approach -- maybe I just confused things
    – cropredy
    Sep 10, 2015 at 0:53
  • @WillemMulder I know this is not the "right" way to solve this, but I would simply populate a value in the re2 field using javascript if it's hidden. Since I'm assuming you don't need the re2 field when it's hidden (i.e. the value is meaningful only when the re2 field is shown), this shouldn't be a problem. You can always nullify it in the controller before the save/whatever action you need to happen.
    – Tal Carmi
    Sep 10, 2015 at 12:43
1

So we ended up doing some CSS tweaking to make sure that the fields look all right when doing the wrapping necessary for rerendering. Still not an optimal solution, so I will leave the question open for now.

<style>    
    .correctAlignment_column1 { margin-left: -86px; }
    .correctAlignment_column2 { margin-left: -34px; }
    .labelCorrection { font-weight: bold; }
</style>

<apex:pageBlock>   
  <apex:pageblocksection title="Personal Details">
    <apex:inputfield value="{!acc.Name}" />
    <apex:inputfield value="{!acc.Custom1__c}" id="re1" onchange="checkRe2Visibility();"  />    
    <apex:pageblocksectionItem >
      <apex:outputLabel value="" />    
      <apex:outputPanel id="wrapper" styleClass="correctAlignment_column1">        
        <apex:outputLabel styleClass="labelCorrection" value="{!$ObjectType.Account.fields.Custom2__c.label}" rendered="{!acc.Custom1__c != 'test'}" />
        <apex:inputfield value="{!acc.Custom2__c}" id="re2" rendered="{!acc.Custom1__c != 'test'}" required="true" />
      </apex:outputPanel>
    </apex:pageblocksectionItem>
  </apex:pageblocksection>
</apex:pageBlock>
<apex:actionFunction reRender="wrapper" name="checkRe2Visibility"/>
Improve this answer
-3

I hope this may be help you..

<apex:outputPanel id="wrapper" rendered = "{!If(acc.Custom1__c != 'test',true,false)}">        
      <apex:inputfield value="{!acc.Custom2__c}" id="re2"  />
    </apex:outputPanel>

Thanks

Improve this answer
1
  • 1
    This will NOT help as the output panel has a rendered attribute which will NOT be reevaluated by rerendering the output panel. Not to mention, the OP already said they tried an output panel with the layout being affected but working.
    – Eric
    Sep 8, 2015 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.