3

I have 2 parent components which reuse the same child components with different attributes. I have a tab for each parent component. When I switch tabs, the components in the previous page still exist in the DOM. For eg: a div element is reused in the child, document.getElementById('theDiv') selects the div from the previous component rather than the new(since there are now 2 divs with the same ID). How can we remove the entire parent component from the dom while switching tabs?

  • Btw , tabs do you mean Lightning Experience tabs or is it the lightning:tabset ?? – StormBr34ker Nov 6 '17 at 10:54
  • I just faced the same issue, any further update on solving it? – patryk Jul 11 '18 at 7:06
1

I ran into same problem few months ago. If user opens the same component without refreshing the page then this situation occurs.

As per this post(Can we give aura:id attribute for plain html elements?), I have updated all my components as below and it now works fine.

Test.cmp:

<aura:component>
    <div aura:id="div-parent-aura-id">
        <button id="btn-id" onclick="{!c.buttonClick}">click me</button>
    </div>
</aura:component>

TestController.js:

// Controller
({
    buttonClick: function(component,event,helper){
        var rootElem = component.find('div-parent-aura-id').getElement();
        rootElem.querySelector('#btn-id').innerHTML = 'Saving..';
    }
})
|improve this answer|||||
  • according to this, it won't work on divs, did that change? – Basti Nov 6 '17 at 21:48
  • 1
    @Basti That one talks about assigning id at runtime. The one I quoted talks about giving static id. Purpose of giving id here is just to wrap everything inside it to avoid the problem OP and I ran into. – javanoob Nov 6 '17 at 21:50
  • 1
    Oh, now I see the difference, thanks for clarifying!! – Basti Nov 6 '17 at 21:53
0

Instead of document.getElementById('theDiv') you could use aura-id attributes and use find() in your controller.

<lightning:card title="fooBar" aura-id="theCard">
    fooBar
</lightning:card>

component.find("theCard);

Or give your elements unique ids as described here

<div id="{!globalId + '_foo'}"></div>

var globalId = cmp.getGlobalId();

getGlobalId() returns the components global Id. But as Aidan pointed out in the comments, this might not be reliable under certain circumstances:

A global ID (1) is not guaranteed to be the same beyond the lifetime of a component, so it should never be relied on.

|improve this answer|||||
  • 1
    I'm not sure it's safe to use global ids like this. If a component gets destroyed and recreated (e.g. if you navigate away from the component and back again later), then the global id can change. "A global ID (1) is not guaranteed to be the same beyond the lifetime of a component, so it should never be relied on." developer.salesforce.com/docs/atlas.en-us.lightning.meta/… – Aidan Nov 6 '17 at 10:28
  • @Aidan thanks for mentioning that, I added it to the answer. – Basti Nov 6 '17 at 10:52

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.