3

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);
}
4

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

 <aura:handler event="c:updateRaceList" action="{!c.handleUpdateRaces}" />

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.