You need to sign in to do that
Don't have an account?
Pradip Kr. Shukla
In Lightnining Component , not able to find child element id
Hi All ,
I am developing a lightning component and its has nested Aura Iteration component.Code is wrriten here-
1-Component Code :
<aura:component >
<aura:attribute name="objInt" type="IntController.IntNodeWrapper" />
<aura:attribute name="ext" type="String" default="plus"/>
<aura:attribute name="extChild" type="String" default="plus"/>
<li id="tree0-node0" class="slds-tree__branch slds-is-open" role="treeitem" aria-level="1" aria-expanded="true">
<div class="slds-tree__item">
<!--<ui:inputCheckbox value="{!v.objInt.isSelected}"/>-->
<aura:if isTrue="{!v.objInt.hasChildren == true}">
<aura:if isTrue="{!v.ext=='plus'}">
<div id="plus" >
<img onclick="{!c.showHidePanel}" draggable="false" class="emoji" alt="➕" src="/resource/Icons/Icons/round_plus.png" style="width:20px;height:20px;"/>
</div>
<aura:set attribute="else">
<div id="minus"><img onclick="{!c.showHidePanel}" draggable="false" class="emoji" alt="➖" src="/resource/Icons/Icons/round_minus.png" style="width:20px;height:20px;"/></div>
</aura:set>
</aura:if>
<aura:set attribute="else">
</aura:set>
</aura:if>
<a id="tree0-node0-0-link" tabindex="-1" onclick="{!c.showHidePanel}" role="presentation">{!v.objInt.myIntName}</a>
</div>
<ul aura:id="{!v.objInt.myIntId}" id="{!v.objInt.myIntId}" style="display:none;" class="slds-tree__group slds-nested" role="group" aria-labelledby="tree0-node0-link">
<aura:iteration items="{!v.objInt.myChildNodes}" var="ChildInt">
<aura:if isTrue="{!ChildInt.hasChildren == true}">
<li id="tree0-node0-1" class="slds-tree__item" role="treeitem" aria-level="2" style="margin-left: 50px;">
<div class="slds-tree__item">
<aura:if isTrue="{!ChildInt.hasChildren == true}">
<aura:if isTrue="{!v.extChild=='plus'}">
<div id="plus" >
<img onclick="{!c.ChildshowHidePanel}" draggable="false" class="emoji" alt="➕" src="/resource/Icons/Icons/round_plus.png" style="width:20px;height:20px;" name="{!ChildInt.myIntId}"/>
</div>
<aura:set attribute="else">
<div id="minus"><img onclick="{!c.ChildshowHidePanel}" draggable="false" class="emoji" alt="➖" src="/resource/Icons/Icons/round_minus.png" style="width:20px;height:20px;"/></div>
</aura:set>
</aura:if>
<aura:set attribute="else">
</aura:set>
</aura:if>
<a id="tree0-node0-0-link" tabindex="-1" onclick="{!c.ChildshowHidePanel}" role="presentation">{!ChildInt.myIntName}</a>
</div>
<ul aura:id="{!ChildInt.myIntId}" id="{!ChildInt.myIntId}" style="display:none;" class="slds-tree__group slds-nested" role="group" aria-labelledby="tree0-node0-link">
<aura:iteration items="{!ChildInt.myChildNodes}" var="GrandChildInt">
<li id="tree0-node0-2" class="slds-tree__item" role="treeitem" aria-level="3" style="margin-left: 50px;">
<!--<ui:inputCheckbox aura:id="checkbox" value="{!ChildInt.isSelected}"/>-->
<a href="#" role="presentation" class="slds-truncate" style="color: darkgoldenrod;">{!GrandChildInt.myIntName}</a>
</li>
</aura:iteration>
</ul>
</li>
<aura:set attribute="else">
<li id="tree0-node0-1" class="slds-tree__item" role="treeitem" aria-level="2" style="margin-left: 50px;">
<a href="#" role="presentation" class="slds-truncate" style="color: darkgoldenrod;">{!ChildInt.myIntName}</a>
</li>
</aura:set>
</aura:if>
</aura:iteration>
</ul>
</li>
</aura:component>
2-Controller Code :
({
showHidePanel : function(component, event, helper) {
var id=component.get("v.objInt.myIntId");
var e=document.getElementById(id);
if (e.style.display == 'block' || e.style.display==''){
e.style.display = 'none';
component.set("v.ext","plus");
}else{
e.style.display = 'block';
component.set("v.ext","minus");
}
},
ChildshowHidePanel : function(component, event)
{
var id=component.get("ChildInt.myIntId");
var e=document.getElementById(id);
if (e.style.display == 'block' || e.style.display==''){
e.style.display = 'none';
component.set("v.extChild","plus");
}else{
e.style.display = 'block';
component.set("v.extChild","minus");
}
},
})
3-Result:
From above code piece , i want if user click on "Child Test1" then child "GrandChild Test2" should be visible. As of now its working for 1st level(i.e. when user clicks on "Test Parent" then it is working)
From Controller code , we are calling "ChildshowHidePanel : function(component, event)" method on "Child Test1" click and gettting undefined value of id(var id=component.get("ChildInt.myIntId"); ).
I am developing a lightning component and its has nested Aura Iteration component.Code is wrriten here-
1-Component Code :
<aura:component >
<aura:attribute name="objInt" type="IntController.IntNodeWrapper" />
<aura:attribute name="ext" type="String" default="plus"/>
<aura:attribute name="extChild" type="String" default="plus"/>
<li id="tree0-node0" class="slds-tree__branch slds-is-open" role="treeitem" aria-level="1" aria-expanded="true">
<div class="slds-tree__item">
<!--<ui:inputCheckbox value="{!v.objInt.isSelected}"/>-->
<aura:if isTrue="{!v.objInt.hasChildren == true}">
<aura:if isTrue="{!v.ext=='plus'}">
<div id="plus" >
<img onclick="{!c.showHidePanel}" draggable="false" class="emoji" alt="➕" src="/resource/Icons/Icons/round_plus.png" style="width:20px;height:20px;"/>
</div>
<aura:set attribute="else">
<div id="minus"><img onclick="{!c.showHidePanel}" draggable="false" class="emoji" alt="➖" src="/resource/Icons/Icons/round_minus.png" style="width:20px;height:20px;"/></div>
</aura:set>
</aura:if>
<aura:set attribute="else">
</aura:set>
</aura:if>
<a id="tree0-node0-0-link" tabindex="-1" onclick="{!c.showHidePanel}" role="presentation">{!v.objInt.myIntName}</a>
</div>
<ul aura:id="{!v.objInt.myIntId}" id="{!v.objInt.myIntId}" style="display:none;" class="slds-tree__group slds-nested" role="group" aria-labelledby="tree0-node0-link">
<aura:iteration items="{!v.objInt.myChildNodes}" var="ChildInt">
<aura:if isTrue="{!ChildInt.hasChildren == true}">
<li id="tree0-node0-1" class="slds-tree__item" role="treeitem" aria-level="2" style="margin-left: 50px;">
<div class="slds-tree__item">
<aura:if isTrue="{!ChildInt.hasChildren == true}">
<aura:if isTrue="{!v.extChild=='plus'}">
<div id="plus" >
<img onclick="{!c.ChildshowHidePanel}" draggable="false" class="emoji" alt="➕" src="/resource/Icons/Icons/round_plus.png" style="width:20px;height:20px;" name="{!ChildInt.myIntId}"/>
</div>
<aura:set attribute="else">
<div id="minus"><img onclick="{!c.ChildshowHidePanel}" draggable="false" class="emoji" alt="➖" src="/resource/Icons/Icons/round_minus.png" style="width:20px;height:20px;"/></div>
</aura:set>
</aura:if>
<aura:set attribute="else">
</aura:set>
</aura:if>
<a id="tree0-node0-0-link" tabindex="-1" onclick="{!c.ChildshowHidePanel}" role="presentation">{!ChildInt.myIntName}</a>
</div>
<ul aura:id="{!ChildInt.myIntId}" id="{!ChildInt.myIntId}" style="display:none;" class="slds-tree__group slds-nested" role="group" aria-labelledby="tree0-node0-link">
<aura:iteration items="{!ChildInt.myChildNodes}" var="GrandChildInt">
<li id="tree0-node0-2" class="slds-tree__item" role="treeitem" aria-level="3" style="margin-left: 50px;">
<!--<ui:inputCheckbox aura:id="checkbox" value="{!ChildInt.isSelected}"/>-->
<a href="#" role="presentation" class="slds-truncate" style="color: darkgoldenrod;">{!GrandChildInt.myIntName}</a>
</li>
</aura:iteration>
</ul>
</li>
<aura:set attribute="else">
<li id="tree0-node0-1" class="slds-tree__item" role="treeitem" aria-level="2" style="margin-left: 50px;">
<a href="#" role="presentation" class="slds-truncate" style="color: darkgoldenrod;">{!ChildInt.myIntName}</a>
</li>
</aura:set>
</aura:if>
</aura:iteration>
</ul>
</li>
</aura:component>
2-Controller Code :
({
showHidePanel : function(component, event, helper) {
var id=component.get("v.objInt.myIntId");
var e=document.getElementById(id);
if (e.style.display == 'block' || e.style.display==''){
e.style.display = 'none';
component.set("v.ext","plus");
}else{
e.style.display = 'block';
component.set("v.ext","minus");
}
},
ChildshowHidePanel : function(component, event)
{
var id=component.get("ChildInt.myIntId");
var e=document.getElementById(id);
if (e.style.display == 'block' || e.style.display==''){
e.style.display = 'none';
component.set("v.extChild","plus");
}else{
e.style.display = 'block';
component.set("v.extChild","minus");
}
},
})
3-Result:
From above code piece , i want if user click on "Child Test1" then child "GrandChild Test2" should be visible. As of now its working for 1st level(i.e. when user clicks on "Test Parent" then it is working)
From Controller code , we are calling "ChildshowHidePanel : function(component, event)" method on "Child Test1" click and gettting undefined value of id(var id=component.get("ChildInt.myIntId"); ).