Document.getElementId() not working for some div's in Salesforce Summer'16 release

Question

Since Summer'16 release, I have been getting many issues in Lightning components, resolving them by moving all my JQuery to Vanilla JavaScript.

Currently, I am getting an error in Vanilla JS while accessing a Div.

Div_0 {
       Div_1 {
          Div_2, Div_3, Div_4
       }
    }

Take the above structure as an example for div arrangement.

Div_0 and Div_1's Id is not Dynamically given and I am able to access them without any issue.

var Div_1_localCopy = document.getElementById("Div_1");

But, Div_2, Div_3, Div_4's Id is dynamically given; I am not being able to access them with Vanilla JS

var elementLocalCopy = document.getElementById(dynamicId +"elementId");

Not sure whether the issue is related to dynamically giving the ID's or not.

I am converting my Application according to the Summer'16 rules, thus, trying to fix these issues.

Div's not being able to accessible even on "pageRenderingCompleted",

In Salesforce Lightning we cannot write document.onload() thus, There's this 
<aura:handler event="aura:doneRendering" action="{!c.doneRendering}"/>

c.doneRendering will be in Controller then from Controller it'll be redirected to Helper JS.

I have used Chrome debugger and this screenshot above it related to the same.

SE_User · Answer

You can do the same inside renderer provided you are accessing and modifying the DOM elements inside the same component.

In other words, you can access other components DOM as long as they are in the same namespace but won’t be able  to access other components’ DOM that are in different namespace.

Earlier, there were issues in accessing DOM elements even of the same component when locker service was enabled, but they've fixed the same.

Please try again the following:

afterRender: function(component, helper) {
        this.superAfterRender();
        var Div_1_localCopy = document.getElementById("Div_1"); 
    }

Ayan Sengupta · Answer

Since you are setting the IDs dynamically, you need to check whether the DOM has been updated with the IDs before you try to access those

s by their IDs. I faced the same in lightning since I was trying to access dynamically created divs before they were actually populated in the DOM.

Junaid P Khader · Answer

After activating locker service, document.getElementById() will not work.
Instead you can use component.find("xxxx"), where xxxx is the aura:id of the element.

Document.getElementId() not working for some div's in Salesforce Summer'16 release

3 Answers

Add your own answers!

Ask a Question