3

I'll go through it in text, but here is a short video detailing my problem: video

Hi, in this sample code I have collapsible PageBlockSections which are collapsed by default. Currently, when a PageBlockSection is expanded, there is a checkbox there which controls whether the text fields are rendered or not.

Ideally, I would like the text fields to be unrendered until a PageBlockSection is expanded, and have the act of clicking the showListButton on the collapsible PageBlockSection trigger a function which will render the text fields.

However, I am having a tough time figuring out how to detect the show/hide arrow on the PageBlockSection being clicked. Here is some code where I'm just trying to send an alert when the arrow is clicked.

<apex:form >
    <apex:pageBlock>

        <apex:outputPanel id="stories">
            <apex:repeat value="{!storyMap}" var="key">
                <apex:repeat value="{!storyMap[key]}" var="story">                                      
                    <apex:pageBlockSection collapsible="true" title="{!storyHeaderMap[key]}" columns="1" id="preCollapsed">

                        <apex:outputPanel id="text" rendered="true">
                            <apex:pageBlockSectionItem>
                                <apex:outputLabel>Render Rich Text</apex:outputLabel>
                                <apex:inputCheckbox value="{!richTextRenderMap[key]}">
                                    <apex:actionSupport event="onchange" reRender="rich,text">
                                    </apex:actionSupport>
                                </apex:inputCheckbox>
                            </apex:pageBlockSectionItem>


                            <apex:pageBlockSection columns="3" rendered="{!IF(richTextRenderMap[key],true,false)}">
                                <apex:actionRegion >
                                    <p style=" font-size: 11.5px; color: rgb(75,75,75); font-weight: bold; ">
                                        User Story
                                        <apex:inputTextarea styleClass="{!key}" richText="false" value="{!story.User_Story__c}"></apex:inputTextarea>
                                    </p>
                                </apex:actionRegion>
                                <apex:actionRegion>
                                    <p style=" font-size: 11.5px; color: rgb(75,75,75); font-weight: bold; ">
                                        Acceptance Criteria
                                        <apex:inputTextarea styleClass="{!key}" richText="false" value="{!story.Acceptance_Criteria__c}"></apex:inputTextarea>
                                    </p>
                                </apex:actionRegion>
                                <apex:actionRegion>
                                    <p style=" font-size: 11.5px; color: rgb(75,75,75); font-weight: bold; ">
                                        Assumptions
                                        <apex:inputTextarea styleClass="{!key}" richText="false" value="{!story.Assumptions__c}"></apex:inputTextarea>
                                    </p>
                                </apex:actionRegion>
                            </apex:pageBlockSection>
                        </apex:outputPanel>

                        <!-- collapses story pageblocksections when they load -->
                        <script>  
                            twistSection(document.getElementById('img_{!$Component.preCollapsed}')); 
                        </script>

                        <!-- trying to detect clicking the showListButton here -->
                        <script>
                            $("img_{!$Component.preCollapsed}").click(function(){ 
                             alert('hey dawg you clicked the button');
                            });
                        </script>

                    </apex:pageBlockSection>

                </apex:repeat>
            </apex:repeat>
        </apex:outputPanel>

    </apex:pageBlock>
</apex:form>

Any ideas on how to get that alert to pop up from clicking the showListButton which expands the PageBlockSection would be much appreciated. Thanks!

  • I probably should have included this in my answer, but thinking about it, your selector in jQuery is wrong. It would be something more like $("[id$=preCollapsed] img") instead of your current selector, but selecting that way would be even more fragile than the answer I proposed. – sfdcfox Oct 15 '16 at 0:31
4

Caution

This code relies on the internal library, and so may break at any time. Use at your own risk.

Basically, you can override the default method, which will allow you to do something based on the twist happening. There's no official "event" which occurs, as it's just Vanilla JS that's running here.

Here's a proof of concept:

<apex:page>
    <apex:pageBlock>
        <apex:pageBlockSection title="Test" collapsible="true">
            Hello World
        </apex:pageBlockSection>
    </apex:pageBlock>
    <script>
    window.addEventListener('DOMContentLoaded', function() {
        var oldTwist = window.twistSection;
        window.twistSection = function() {
            alert('Detected twist');
            oldTwist.apply(this, arguments);
        }
    });
    </script>
</apex:page>
  • Nice, thank you! I haven't implemented it into my vfp yet, but your page does its job =]. – Monty Killough Oct 17 '16 at 21:18

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.