Essentially I want to be able to fire off an application event in the callback for an action. At first I thought maybe it was not working because the fire was happening in a helper method, so I moved all the code back into the controller, but my application event is still never firing.
I have changed my code several times trying to see if I can make this work and I am thinking that the framework is not going to allow me to do this, but I would love for someone to tell me if there is another way to accomplish this. I basically want to call a function in my handler component, which is not nested because I want it to function independently. But maybe this will just not work. Anyone know?
Here is the controller code:
newRace : function(component, event, helper) {
console.log("In newRace");
var race = component.get("v.newRace");
var action = component.get("c.newRaceDB");
action.setParams({ "race" : race });
action.setCallback(this, function(response) {
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
console.log("Race successfully saved");
var appEvent = $A.get("e.c:updateRaceList");
appEvent.setParams({ "race" : response.getReturnValue() });
appEvent.fire();
}
});
$A.enqueueAction(action);
}
And this is the NewRace component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="NewRaceController">
<aura:attribute name="newRace" type="Race__c"
default="{ 'sobjectType': 'Race__c',
'Name': 'New Race',
'Type__c': '',
'DateTime__c': '',
'Location': '',
'Attended__c': false,
'Results__c': ''
}"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:registerEvent name="updateRaces" type="c:updateRaceList" />
<ltng:require styles="/resource/slds/assets/styles/salesforce-lightning-design-system.min.css"/>
<div class="slds">
<div class="slds-m-around--small slds-p-top--large">
<div class="slds-form--stacked">
<h1 class="slds-text-heading--label slds-p-bottom--large"
title="Enter New Race">Enter New Race</h1>
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputText label="Race Name"
aura:id="Name"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newRace.Name}"
required="true" />
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputSelect label="Race Type"
aura:id="Type"
class="slds-select"
labelClass="slds-form-element__label"
value="{!v.newRace.Type__c}" />
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputDateTime label="Date/Time"
aura:id="DateTime"
class="slds-input"
labelClass="slds-form-element__label"
displayDatePicker="true"
value="{!v.newRace.DateTime__c}" />
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputTextArea label="Location"
aura:id="Location"
class="slds-textarea"
labelClass="slds-form-element__label"
value="{!v.newRace.Location__c}" />
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputCheckbox label="Attended?"
aura:id="Attended"
class="slds-checkbox"
labelClass="slds-form-element__label"
value="{!v.newRace.Attended__c}" />
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputText label="Results"
aura:id="Results"
class="slds-input"
labelClass="slds-form-element__label"
value="{!v.newRace.Results__c}" />
</div>
</div>
<div class="slds-form-element">
<ui:button press="{!c.newRace}"
label="Submit"
class="slds-button slds-button--neutral" />
</div>
</div>
</div>
</div>
</aura:component>
And this is the event:
<aura:event type="APPLICATION">
<aura:attribute name="race" type="Race__c" />
</aura:event>
And this is the code for the handling component
EDIT: And this is where the problem was. The handler here had a name attribute and you cannot have one. Once I removed that, it started firing my app event.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" controller="ListRacesController">
<aura:attribute name="races" type="Race__c[]" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler event="c:updateRaceList" action="{!c.handleUpdateRaces}" />
<ltng:require styles="/resource/slds100/assets/styles/salesforce-lightning-design-system.min.css"/>
<div class="slds">
<div class="slds-m-around--small slds-p-top--large">
<div class="slds-card">
<aura:iteration items="{!v.races}" var="race">
<header class="slds-card__header">
<ui:outputText class="slds-text-heading--label" value="{!race.Name}" />
</header>
<section class="slds-card__body">
<div class="slds-tile slds-hint-parent">
<p class="slds-tile__title slds-truncate">Race Type:
<ui:outputText value="{!race.Type__c}" />
</p>
<p class="slds-truncate">Location:
<ui:outputText value="{!race.Location__c}"/>
</p>
<p class="slds-truncate">Date/Time:
<ui:outputDateTime value="{!race.DateTime__c}" />
</p>
<p class="slds-truncate">Attended?
<ui:inputCheckbox value="{!race.Attended__c}" />
</p>
<p class="slds-truncate">Results:
<ui:outputTextArea value="{!race.Results__c}"/>
</p>
</div>
</section>
</aura:iteration>
</div>
</div>
</div>
And this is it's controller: This is the code that is never executing and I do not know why.
handleUpdateRaces : function(component, event, helper) {
console.log("calling updateRaces in ListRaceController");
var race = event.getParam("race");
var races = component.get("v.races");
races.push(race);
component.set("v.races", races);
}
Best Answer
The issue here is for Application events as mentioned in the docs the handler syntax is not to have name attribute
Modify your handler as below