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');
    },
7

I believe the order of the params is wrong here:

function(component, helper, event)

Should be:

function(component, event, helper)
| improve this answer | |
  • 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 Jan 30 '17 at 12:55

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.