0

I would like to reRender a Div based on some logic. Initially the div will be set as display:none as per the logic (Checking whether the variable is null or not).

But after passing value to controller through apex:actionFunction, I am setting up the variable with proper value. During this time, I am expecting the previous div will be set as display:block. But unfortunately it is not happening.

Here is the code - Apex:actionFunction:

<apex:actionFunction name="verifyJavaScript" action="{!verify}" rerender="displayPreference"/>

Div:

<div class="row" style="{!IF(selectedPreference != null, 'display:block', 'display:none')}" id="displayPreference">
    <div class="col-lg-12 form-group form-group-lg">

        &nbsp;&nbsp;<input id="promoOptIn" rendered="{!IF(selectedPreference != null , true , false)}" name="promoOptIn" type="checkbox" value="1" />&nbsp;&nbsp;Register for Promo Opt In?
        <apex:inputhidden id="promoOptIns" value="{!promoOptIns}" />
    </div>
</div>

Controller:

public PageReference verify(){
    PageReference ProductRefresh = ApexPages.currentPage();
    //Setting up the variable selectedPreference here based on logic
    return ProductRefresh;
}

Could you please help me to understand what is wrong here?

Improve this question

1 Answer 1

Reset to default
2

Rather than using <div> use <apex:outputPanel> and it will render as div in HTML.

<apex:outputPanel class="row" style="{!IF(selectedPreference != null, 'display:block', 'display:none')}" id="displayPreference">
    <div class="col-lg-12 form-group form-group-lg">

        &nbsp;&nbsp;<input id="promoOptIn" rendered="{!(selectedPreference != null)}" name="promoOptIn" type="checkbox" value="1" />&nbsp;&nbsp;Register for Promo Opt In?
        <apex:inputhidden id="promoOptIns" value="{!promoOptIns}" />
    </div>
</apex:outputPanel>

Otherwise, wrap entire <div> block inside an <apex:outputPanel> and rerender that outputPanel as follows:

<apex:outputPanel id="displayPreference">
<div class="row" style="{!IF(selectedPreference != null, 'display:block', 'display:none')}">
    <div class="col-lg-12 form-group form-group-lg">

        &nbsp;&nbsp;<input id="promoOptIn" rendered="{!selectedPreference != null}" name="promoOptIn" type="checkbox" value="1" />&nbsp;&nbsp;Register for Promo Opt In?
        <apex:inputhidden id="promoOptIns" value="{!promoOptIns}" />
    </div>
</div>
</apex:outputPanel>

Side note: don't use if(,true,false) in rendered condition, use rendered="{!selectedPreference != null}" as it displays only at true condition.

Refer apex:outputPanel

A set of content that is grouped together, rendered with an HTML tag, <div> tag, or neither. Use an <apex:outputPanel> to group components together for AJAX refreshes.

This component supports HTML pass-through attributes using the "html-" prefix. Pass-through attributes are attached to the generated container tag, <div> or <span>, depending on the value of the layout attribute.

Improve this answer
6
  • Thanks Santanu. I made the changes suggested by you, but still the outputPanel is not getting reRendered.
    – Sudipta Deb
    Dec 4, 2018 at 17:08
  • did you try both the options? Also, are you assigning selectedPreference variable value properly?
    – Santanu Boral
    Dec 4, 2018 at 17:09
  • Yes. Both the options
    – Sudipta Deb
    Dec 4, 2018 at 17:13
  • Also, are you assigning selectedPreference variable value properly in controller method?
    – Santanu Boral
    Dec 4, 2018 at 17:13
  • Here is the code - public PageReference verify(){ List<Contact> allContacts = <Query Contact>; if(allContacts.size() == 1){ List<Preferences__c> allPreferences = <Query Preference>; if(allPreferences.size() == 1){ selectedPreference = allPreferences.get(0); } } return ProductRefresh; }
    – Sudipta Deb
    Dec 4, 2018 at 17:16

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .