1

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.

  • Does using document.querySelector yield a different result for you? Remember that you will need to add the hash to the front of your Id value when using this function. (developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) – dsharrison Jun 27 '16 at 21:12
  • 1
    Could be LockerService issue...? – dzh Jun 27 '16 at 21:25
  • document.querySelector is giving undefined – BigHairDev Jun 28 '16 at 4:51
  • Yes! it is related to LockerService but, I want my application to run without issues even when LockerService is enabled. – BigHairDev Jun 28 '16 at 4:52
  • @BigHairDev Not too familiar with Lightning Components, but have you tried declaring the variables in document.onload? If the divs are created later you may need to do a callback function based upon how they are rendered. Also, is your JavaScript located right before the ending body tag? – Andrew L. Jun 28 '16 at 17:03
0

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.

  • I am able to use document.getElementById() on different Div's, please check my question; I am not using aura components, what if I need to retrieve html element (which does not have aura:id) – BigHairDev Jun 28 '16 at 5:00
0

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 <div>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.

  • Yes! The divs were created, I can see them in html page, I mean if I inspect element the page, I can see divs; – BigHairDev Jun 28 '16 at 14:55
0

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"); 
    }
  • As I have mentioned in my question, document.getElementById("static_name_div"); is working fine and as it is supposed to; But, document.getElementById(Dynamic_name+"static_name_div"); is not working – BigHairDev Jun 29 '16 at 18:54
  • 2
    Hi @BigHairDev Try accessing the same in afterRender. or if the divs are dynamically created on some action (Say, a button click), then add an attribute which sets to true (default should be false) on button click. (And then write the function for accessing the dynamically created div in reRender inside renderer.) – SE_User Jun 30 '16 at 4: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.