2

I am getting error that

helper.showElement is not a function

when I am clicking on a lightning:icon which is acting as a button. I have also tried the same with lightning:buttonIcon, but still getting the same error. I want to show tool tip on click of this icon. Code significant to problem goes as follows:

Markup:

    <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="AdminPageComponentController">


    <fieldset class="slds-form--compound">
        <div class="slds-form-element slds-is-required container slds-is-relative">
            <div class="slds-form-element__control">                    
               <!--Other code here -->

                        <div class="slds-grid">
                            <div>
                                <ui:inputText aura:id="abcID" label="ABC"
                                              class="slds-input"
                                              labelClass="slds-form-element__label"/>
                            </div>
                            <div>
                                <!--<button aura:id="helpText" class="slds-button slds-button slds-buttonicon"  onclick="{!c.showHelpTextA}" onblur="{!c.hideHelpTextA}">
                                    <lightning:icon iconName="utility:info" size="x-small"/>
                                    <span class="slds-assistive-text">Help</span>
                                </button>-->
                                <lightning:buttonIcon aura:id="helpText" variant = "bare" iconName="utility:info" size="small" onclick="{!c.showHelpTextA}" />
                            </div>
                            <div aura:id= "helpTextDiv" class="slds-hide slds-popover slds-popover--tooltip slds-nubbin--left-top" role="tooltip" id="help" style="position:relative;top:0px;left:15px;">
                                <div class="slds-popover__body">{!$Label.c.help_text}</div>
                            </div>
                        </div>
                        <!--Other code here -->
    </fieldset>
    </div>
    {!v.body}
</div><!-- ./container-->
</aura:component>

Controller:

showHelpTextA : function(component, helper, event){
        helper.showElement(component,  'helpTextDiv');
    },

hideHelpTextA : function(component, helper, event){
        helper.hideElement(component, 'helpTextDiv');
    },

Helper:

showElement : function(component, id){
        var divElement=component.find(id);
        $A.util.removeClass(divElement, 'slds-hide');
        $A.util.addClass(divElement, 'slds-show');
    },

    hideElement : function(component, id){
        var divElement=component.find(id);
        $A.util.removeClass(divElement, 'slds-show');
        $A.util.addClass(divElement, 'slds-hide');
    },

1 Answer 1

7

I believe the order of the params is wrong here:

function(component, helper, event)

Should be:

function(component, event, helper)
1
  • Wow...I never knew that ORDER was important! I guess I was living in a dream inside lightning...thanks a lot for that! However, when I console.logged it, I could reach way inside till the showElement function. If the order was the issue it should've not entered the helper functions right? And it would've saved me a bit of thinking effort!
    – Sarang
    Commented Jan 30, 2017 at 12:55

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .