[SalesForce] Dynamic Rendering of Div based on Apex Controller Value

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?

Best Answer

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.

Related Topic