3

I am facing an issue with the Locker service. I have a simple piece of code which retrieves a DOM element in the same namespace. I have attached the code here. The issue is that if the Locker service is disabled, I am able to read the element and the console output is as shown in the screenshot. Whereas, if it is enabled, the element is displayed as blank on the console output. I have attached both screenshots as well as the code. Summer 16 - Salesforce version

TestLightningApp.app

<aura:application >
    <ui:inputText aura:id="myInput"/>
    <br/><br/>
    <button onclick="{!c.getInputDOM}" >Get Input DOM</button>
</aura:application>

TestLightningAppController.js

({
    getInputDOM : function(component, event, helper) {
        console.log(component.find("myInput"));
    }
})

Console log output: Locker service is disabled enter image description here

Console log output: Locker service is enabled enter image description here

2

Component.find(auraId) does not yield a DOM element it always returns a component. You can no longer (never should have been allowed to in the first place but Lightning without Locker is like speed limits with without law enforcement) access the internal implementation of a component you do not own (e.g. getElement() to make an implicit dependency that is 100% unsupportable encapsulation breakage). With components you need to interact with them by their public API only (methods, attributes, and events).

  • Thanks for the quick response. What is the best way to access component HTML? For example i have one HTML table in my aura component and i want to read it's tr and td onclick of button. i am using document.getElementById('TableId') and it's not working with locker service. it's returning undefined. – Sagar Thoriya Oct 4 '16 at 12:45
  • @thoriyas document.getElementById() will still work with LockerService enabled. Since this is a DOM API rather than an Aura/Lightning API, make sure your element in the component markup has its 'id' property set to 'TableId' instead of the 'aura:id' property. Please take note, however, of what Doug says about trying to access internals of components you do not own. If the 'TableId' element is not created by a component in your namespace (thus, you do not have access), getElementById will still return undefined. – TrevorBliss Oct 10 '16 at 23:10
1

Thats seems like proper behaviour to me .

You will need to wrap everything into a component and use component inside your aura:application.Lets name it as InputCmp.cmp

<aura:component>
<ui:inputText aura:id="myInput"/>
<br/><br/>
<button onclick="{!c.getInputDOM}" >Get Input DOM</button>
</aura:component/>

And your controller code is as below

InputCmpController.js

({
  getInputDOM : function(component, event, helper) {
    console.log(component.find("myInput"));
   }
 })

The application would be like below

<aura:application >
  <c:InputCmp/>
</aura:application>
  • Thanks for the your input. I have tried as you suggest but it's returning the same result. – Sagar Thoriya Oct 4 '16 at 12:48
1

I could not reproduce it. Using console.log(component.find("myInput").get("v.value")); I was able to get the value of the field both in Summer '16 and Winter '17 with LockerService activated.

0

Thats seems like proper behaviour to me .

You will need to wrap everything into a component and use component inside your aura:application.Lets name it as InputCmp.cmp

<aura:component>
<ui:inputText aura:id="myInput"/>
<br/><br/>
<button onclick="{!c.getInputDOM}" >Get Input DOM</button>
</aura:component/>

And your controller code is as below

InputCmpController.js

({
  getInputDOM : function(component, event, helper) {
    var inputValue = component.find("myInput").get("v.value");
    console.log(inputValue);

   }
 })

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.