0

I have an onMouseover function that fires and event to another component within an app. The event is firing correctly but the other component is not 'listening' to the event. None of the code in the event handler is being run.

I have run into issues in the past with the naming convention of events. Am I running into a similar situation here?

The Event

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

CMP with onMouseover

<aura:component controller="MSAController" implements="flexipage:availableForAllPageTypes" access="global">

<aura:attribute name="msaModel" type="Object[]" />
<aura:attribute name="testString" type="String" default = "" />
<aura:registerEvent name="MSACommandCentralOnHover" type="c:MSACommandCentralOnHover"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<article class = "slds-card">
    <div style = "padding-left:.75rem">
        <div class="title" style = "position: relative">
            <lightning:icon iconName="custom:custom83" size="Large" />
            <h3 class="slds-section__title" style = "margin: 0;
                                                     position: absolute;
                                                     top: 50%;
                                                     -ms-transform: translateY(-50%);
                                                     transform: translateY(-50%);
                                                     padding-left: .75rem;
                                                     font-weight: 300;
                                                     font-size: 1.25rem;
                                                     color: rgb(8, 7, 7);">Upcoming MSA Opportunities</h3>
        </div>
        <table>
            <aura:iteration items="{!v.msaModel}" var="item" indexVar="index">
                <tr onmouseover="{!c.updateHover}" data-value="{#item.id}">
                    <td class="col-Name">
                        <div class="slds-truncate" style="font-size:15px;"><a data-id="{#item.id}" onclick="{!c.navigateToRecord}">{#item.Name}</a></div>
                    </td>
                    <td class="col-graph">
                        <div style="width:100%" class="slds-progress-bar slds-progress-bar_circular slds-progress-bar_large "
                             aria-valuemin="0" aria-valuemax="60" aria-valuenow="item.DiffDays" role="progressbar">
                            <span class="{! 'slds-progress-bar__value '+ item.graphcolor}" style="{! 'width:  ' + (((60 - (item.DiffDays))/60) * 100) + '%;'}">
                                <span class="slds-assistive-text">Help Text</span>
                            </span>
                            <div class="slds-text-align--center">
                                <ui:outputNumber value="{#60-item.DiffDays}"/>
                                /
                                <ui:outputNumber value="60"/> Days
                            </div>

                            <div>
                                <td class="col-graph">
                                    <div>Completed Stage: <b>{#item.StageName}</b></div>
                                </td>
                                <td class="col-graph">
                                    <div>Outlook: <b style="{!'color:'+ item.feedbackcolor}" >{#item.feedback}</b></div>
                                </td>
                            </div>

                        </div>
                    </td>
                    <td class="col-Name">
                        <div class="slds-truncate">Amount:  <p><lightning:formattedNumber value="{#item.Amount}" style="currency" currencyCode="USD"/></p></div>
                    </td>
                    <aura:renderIf isTrue="{#item.expButtonVisible}">
                        <td class="col-Name" >
                            <div onclick="{!c.handleSetExpired}" data-value="{#item.id}">
                                <button class = "slds-button slds-button_destructive slds-button_stretch" value="{#item.id}">MSA Expired</button>

                            </div>
                        </td>
                        <aura:set attribute="else">
                        </aura:set>
                    </aura:renderIf>

                </tr>            
            </aura:iteration>
            {!v.testString}
        </table>
    </div>
</article>

</aura:component>

It's JS controller function

updateHover : function(component, event, helper){
    var createEvent = component.getEvent("MSACommandCentralOnHover");        
    createEvent.setParams({"opp":event.currentTarget.dataset.value});
    createEvent.fire();

},

CMP with event handler

<aura:component implements="flexipage:availableForAllPageTypes" access="global">
<aura:attribute name="opId" type="String" />
<aura:registerEvent name="MSACommandCentralOnHover" type="c:MSACommandCentralOnHover"/>

<aura:handler name="updateOp" event="c:MSACommandCentralOnHover"
              action="{!c.handleHover}"/>

<article class='slds-card'>
    <div style = "padding-left:.75rem" >
        <div class="title" >
            <h3 class="slds-section__title" style = "font-weight: 300;
                                                     font-size: 1.25rem;
                                                     color: rgb(8, 7, 7)">Oppotunity Details</h3>
        </div>
        <lightning:recordForm
                              recordId="{!v.opId}"
                              objectApiName="Opportunity"
                              layoutType="Full"
                              columns="2"
                              mode="readonly" />
    </div>
</article>
</aura:component>

event handler JS function

({
handleHover : function(component, event, helper) {
    console.log('event caught');
    var oid = event.getParam("opp");
    component.set("v.opId",oid);
}
})
1

Do not specify a "name" attribute in order to handle application events.

<aura:handler event="c:MSACommandCentralOnHover"
          action="{!c.handleHover}"/>

This is mentioned in the documentation.

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

1

first of all your event type is Application so you don't need to Register event, so you need to update the logic of updateHover function.

updateHover : function(component, event, helper){
    var createEvent = $A.get("e.c:MSACommandCentralOnHover");            
    createEvent.setParams({"opp":event.currentTarget.dataset.value});
    createEvent.fire();

},

then listener cmp don't need to be register the event, so you can remove

<aura:registerEvent name="MSACommandCentralOnHover" type="c:MSACommandCentralOnHover"/>

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.