3

I'm having issues with a very simple use case. namely display a lightning component upon a button click via refreshing an output panel, then hiding the component via rendered=false on the same output panel. then showing the component again. It appears as if another 'instance' of the component is created. What is the proper way to 'destroy' the component and remove it from the DOM without having to refresh the entire page? Thanks so much.

<apex:page id="vfLightningRefreshTest" controller="ctrlLightningRefreshTest">
<html>
<head>
    <apex:stylesheet value="{!URLFOR($Resource.SLDS203_SCOPED_CARPLS, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
    <apex:includeLightning />
    <script>
        function fRefreshlComp() {
            afRefreshlComp();
        }
    </script>
</head>
<body>
<div class="carpls">
<div style="margin-top:20px;margin-bottom:20px;margin-left:20px">
    <apex:outputPanel layout="block" id="buttons">
    <button type="button"
            class="slds-button slds-button--brand"
            onclick="fRefreshlComp();return false;">

        <apex:outputText value="Show it" rendered="{!!showComp}" />
        <apex:outputText value="Hide it" rendered="{!showComp}" />

    </button>
    </apex:outputPanel>
</div>
<apex:form>
    <apex:actionFunction name="afRefreshlComp" action="{!doRefreshlComp}"
                         reRender="{!$Component.lComp},{!$Component.buttons}"
                         oncomplete="console.log('oncomplete refreshLComp');" />
</apex:form>
<apex:outputPanel id="lComp" layout="block">
    <apex:outputPanel layout="block" rendered="{!showComp}">
        The below simply contains a RTE using ticyMCE but will help with debugging refreshing
        Last Refreshed = {!now()}
        <br/>
        <script>
            $Lightning.use("c:DebugServices", function() {
                $Lightning.createComponent(
                        "c:TinyMCE",
                        {},
                        "lCompContent",
                        function(cmp) {
                            //lCmp = cmp;

                        });
            });
        </script>
        <div id="lCompContent">

        </div>
    </apex:outputPanel>
</apex:outputPanel>
</div>
</body>

5
  • The code works fine for me and it does not create multiple instance for me in winter 17 org .Is the issue with your backend code ? Oct 31 '16 at 3:55
  • @MohithShrivastava I think ChiCloud is right, the instance is not getting destroyed even though it is outputpanel is rerendered
    – Praveen
    Oct 31 '16 at 4:25
  • I still did not get the question. I did not see need to destroy the DOM .If its security thing then he can fire an event from vf and in lightning component use component destroy() Oct 31 '16 at 4:28
  • @MohithShrivastava I'm not sure why OP is concerned about the instance not being destroyed. But I already tried what you said, seems like it didn't work. I counted the no.of component's rendered using $A.componentService.countComponents() when the outputpanel is rerendered, the count increases everytime it is shown.
    – Praveen
    Oct 31 '16 at 8:18
  • @Praveen Just answered .Check it ! This is exactly what i was talking about . Oct 31 '16 at 16:13
2

You can use Component.destroy() method to manually destroy the component

You will need to do below changes to your script

 <script>
        var vfcomponents = {}; // global Object container for your script to store the component 
        $Lightning.use("c:DebugServices", function() {
            $Lightning.createComponent(
                    "c:TinyMCE",
                    {},
                    "lCompContent",
                    function(cmp) {
                        vfcomponents = cmp;

              });
        });
    </script>

add the destroy statement in your script when you call an action function

 <script>
    function fRefreshlComp() {
         console.log(vfcomponents);
         vfcomponents.destroy();//Destroy Previous component 
         afRefreshlComp();
    }
</script>

To verify use count service as below on your console .

$A.componentService.countComponents()

2
  • +1 for the destroy() way.I tried calling the autoDestroy() in the component from vf page through event.But it didn't work.
    – Praveen
    Oct 31 '16 at 16:22
  • ah I have not tried autoDestroy() from actual component .The easiest way i thought was use destroy() .One thing from security perspective to worry about is the globals but i guess once we wrap around that as a self executing function it should be fine . Oct 31 '16 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.