1

I am trying to handle Application event in a listening component but it doesn't work for some reason. Please, help. I can't write in console log "here" in the end

Application

<aura:application extends="force:slds" access="global">
    <c:SearchCmp/>
    <c:DisplaySearchResultCmp/>   
</aura:application>

Search Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <aura:registerEvent name="searchEvt" type="c:SearchEvent" />
    <aura:attribute name="inputSearch" type="String"/>
    <div>
        <lightning:input label="Search for books and writers:" value="{!v.inputSearch}"/>
    </div>
    <lightning:button
        label="Search"
        onclick="{!c.getInput}" />
</aura:component>   

Search Component Controller

getInput : function(component, event, helper) {
    helper.fireAppAction(component, event);
}

Search Component Helper

fireAppAction : function(component, event) {
        var appEvent = $A.get("e.c:SearchEvent");
        appEvent.setParams({
            "searchQuery": component.get("v.inputSearch")
            });
        appEvent.fire();
    }

Result Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"  access="global" controller="SearchCmpController">

    <aura:handler name="showResultList" event="c:SearchEvent" action="{!c.searchData}"/>

   <aura:attribute name="resultWrappers" type="SearchCmpController.BookWriterWrapper[]"/>
    <aura:attribute name="isEmptyResult" type="Boolean" default="true"/>

    <div>
        <div class="{!v.IsEmptyResult ? 'disp' : 'slds-hide'}">Results</div>
        <div class="{!v.IsEmptyResult ? 'slds-hide' : 'disp'}">No Results</div>
    </div>

</aura:component>

Result Component Controller

searchData : function(component, event, helper) {
        console.log("here");
        component.set("v.resultWrappers", true);
    }

Event "SearchEvent"

<aura:event type="APPLICATION">
    <aura:attribute name="searchQuery" type="String"/>
</aura:event>
3

You will need to remove the name attribute from your Result Component while declaring the handler.

From documentation:

The handler for an application event won’t work if you set the name attribute in <aura:handler>. Use the name attribute only when you’re handling component events.

So on your Result Component, your handler declaration should be written as (notice there’s no name attribute):

<aura:handler event="c:SearchEvent" action="{!c.searchData}"/>

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.