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>

Improve this question
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 ?
    – Mohith Shrivastava
    Oct 31, 2016 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, 2016 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()
    – Mohith Shrivastava
    Oct 31, 2016 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, 2016 at 8:18
  • @Praveen Just answered .Check it ! This is exactly what i was talking about .
    – Mohith Shrivastava
    Oct 31, 2016 at 16:13

1 Answer 1

Reset to default
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()

Improve this answer
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, 2016 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 .
    – Mohith Shrivastava
    Oct 31, 2016 at 16:24

You must log in to answer this question.

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