You need to sign in to do that
Don't have an account?
How to get dom value of element in lightning namespace?
I am facing some problem in traversing lightning proxy dom.
Requirement: To change the lightning icon (SVG use path) when lightning components render as in below lightning icon Dom screen-shot:
Here, I am using lightning approval icon and it generates "approval" id when it renders in the browser by default.
So, I have to access this SVG part of Dom id="approval" which I am unable to do so with below code.
Couple of below scenarios I used to get this:
1) Component.find()- I tried with the component.find("approval") but it gives undefined as it requires aura:id, which is not my case- as I have to find this dom component in the controller by this "approval" id only.
2) Jquery-I used Jquery to traverse dom but no luck.
3) component.getElements()- This gives proxy dom component(Locker Service) and values of this SVG are coming when I am debugging it as in the last screen-shot, but I am unable to traverse this Dom after.
Could you please help me with this and tell me an easy way to do that?
Component Code:
<aura:component >
<ltng:require scripts="{!$Resource.jQuery + '/jquery.js'}" afterScriptsLoaded="{!c.scriptsLoaded}"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />:
<div id="test">
<lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>
</div>
</aura:component>
Controller :
({
doInit : function(component, event, helper) {
var svg = component.find('approval');
console.log('i am in doinit');
console.log(svg);
//var elements = document.getElementsByClassName("slds-icon-action-approval");
//console.log(elements);
},
scriptsLoaded : function(component, event, helper) {
$(document).ready(
function()
{
//console.log(document.getElementById("sumit"));
}
);
//console.log($( '#test'));
},
})
AfterRender:
({
afterRender : function(component,helper){
component.superAfterRender();
var svg=component.getElements();
console.log('i am in afterrender');
console.log(svg);
//console.log(elements);
}
})
Thanks in Advance!!
Hi,
You have to add aura:id attribute in <lightning:icon>
<lightning:icon iconName="action:approval" aura:id="approval" size="large" alternativeText="Indicates approval"/>
Now,find this element in js controller
var svg = component.find('approval');
Thank you
But my requirement is such like I have to get it through without aura id.
Thanks,
Sumit
Did you find a fix?
- I currently have the same issue, I need to reference other DOM Elements from other Components but due to Lighthning Locker I can only see components within the same namespace.
- I have tried 'document.querySelector()' to search the DOM by Class but from my Lightning Components JS Controller I don't think the whole DOM Heirarchy is available, specifically the Standard Salesforce Community Template elements (buttons, linkes, etc.) basically anything that is not a Lightning Component.
Any help is appreciated.
Thanks,
Chris
Hi All,
I'm also looking for a solution to access DOM in other components. Did anyone find a solution ?