On init of a component, I want to hide an element lightning:buttonIcon if some condition is satisfied(see controller code). In this case it is getting satisfied and I am reaching the code where element is to be hidden(hideElement function in helper). But the element is still visible, on the other hand, if we access the same code (hideElement function) from helper itself like:

this.hideElement(component, id);

It hides the element. What is the reason behind this?


<!-- Some code above -->

<div class="slds-p-horizontal--small slds-size--1-of-2 slds-medium-size--1-of-6 slds-large-size--4-of-12">
                <lightning:buttonIcon aura:id="addFieldButtonID" iconName="utility:new" size="large" variant="bare" onclick="{! c.handleFieldDone }" alternativeText="Done!"/>
                <div class="slds-icon_container slds-icon_containercircle">
                    <lightning:icon aura:id="doneFieldIcon" iconName="action:approval" size="xx-small" alternativeText="Done" class="slds-hide"/>
                <lightning:buttonIcon iconName="utility:clear" size="large" variant="bare" alternativeText="Remove" onclick="{! c.removeEntry }"/>

<!-- some code below -->


handleInit : function(component, event, helper){

            helper.HideElement(component, 'addFieldButtonID');


hideElement : function(component, id){
        var element=component.find(id);
        console.log('Element: ' , element.getLocalId()); //gives ID as :addFieldButtonID
        $A.util.removeClass(element, 'slds-show');
        $A.util.addClass(element, 'slds-hide');
        console.log('elementclass: ' , element.get('v.class')); //gives o/p : undefined
  • var divElement = component.find(id); -- On this line, Are you sure you are getting the div enclosing the lightning:buttonIcon or lightning:buttonIcon itself? – javanoob Jan 31 '17 at 6:20
  • @javanoob : I am getting the lightning:buttonIcon itself, i.e : addFieldButtonID – Sarang Jan 31 '17 at 6:23
  • Ok. Your variable naming is confusing, you named it as though you are getting div enclosing it. – javanoob Jan 31 '17 at 6:24
  • agreed and changed! – Sarang Jan 31 '17 at 6:28
  • 4
    @Rangya Instead of doing things in init, can you try it in afterRenderer?. Reason is that init is called long before DOM availability, there might be a timing issue too. – Praveen Jan 31 '17 at 6:31

Instead of doing things in init, try it in afterRenderer. Reason is that init is called long before DOM availability, which might cause a timing issue.

Incase of afterRenderer it is called only after the DOM is rendered in the view.


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.