0

I am working through the Aura components trailhead but am running into an issue where the component event is not firing. Here is my code:

CampingList cmp

    <aura:component controller = 'CampingListController' >


    <c:campingHeader/>
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="addItem" event="c:addItemEvent"
        action="{!c.handleAddItem}"/>
    <c:campingListForm/>

    <lightning:card title='Camping List' > 
        <aura:iteration items = '{!v.items}' var = 'citem'>
            <c:campingListItem item = "{!citem}"/><br/>
        </aura:iteration>
    </lightning:card>

    </aura:component>

CampingListjs controller

    handleAddItem: function(component, event, helper) {
    var newItem = event.getParam("campingitem");
    helper.createItem(component, newItem);
    }

CampingList helper

createItem : function(component, cil) {
    var action = component.get("c.saveItem");
    action.setParams({
        "cil": cil
    });

        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {

                var campItemList = component.get("v.items");
                campItemList.push(response.getReturnValue());


                component.set("v.items", campItemList);
                component.set("v.newItem",{'sobjectType':'Camping_Item__c',
                                           'Name': '',
                                           'Quantity__c': 1,
                                           'Price__c': 0,
                                           'Packed__c': false});           
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        // Send action off to be executed
        $A.enqueueAction(action);  
    }

CampingListForm cmp

<aura:component >
<aura:attribute name="newItem" type="Camping_Item__c" default="{'sobjectType':'Camping_Item__c','Price__c':'0','Quantity__c':'0','Packed__c':'False'}"/>    
<aura:registerEvent name="updateCampingItem" type="c:addItemEvent"/>

<form class="slds-form--stacked" label = 'Camping List'>        
    <lightning:input aura:id="campingItemForm" name="Name" required="true" label="Name" value="{!v.newItem.Name}"/>
    <br/>
    <lightning:input aura:id="campingItemForm" type="number" name="Quantity" required="true" min="1" default="1" label="Quantity - Requires a minimum value of 1" value="{!v.newItem.Quantity__c}" messageWhenRangeUnderflow="Enter an amount that's at least 1" />
    <br/>
    <lightning:input aura:id="campingItemForm" id="Price" formatter="currency" name="Price" required="true" label="Price" value="{!v.newItem.Price__c}"/>
    <br/>
    <lightning:input aura:id="campingItemForm" id = "Packed" type="checkbox" name="Packed" label="Packed" checked="{!v.newItem.Packed__c}" />
    <br/>

    <lightning:button label = "Add Item" onclick = '{!c.clickCreateItem}'/>

</form>
</aura:component>

CampingListForm js controller

({
clickCreateItem: function(component, event, helper) {

    var validExpense = component.find('campingItemForm').reduce(function (validSoFar, inputCmp) {
        // Displays error messages for invalid fields
        inputCmp.showHelpMessageIfInvalid();
        return validSoFar && inputCmp.get('v.validity').valid;
    }, true);
    // If we pass error checking, do some real work
    if(validExpense){
        var campItem = component.get("v.newItem");
        helper.createItem(component, campItem);            
    }
}
})

CampingListForm helper

createItem: function(component, cil) {
    var createEvent = component.getEvent("updateCampingItem");
    createEvent.setParams({ "campingitem": cil });
    console.log('About to fire');
    createEvent.fire();
}

addItemEvent.evt

<aura:event type="COMPONENT">
<aura:attribute name="campingitem" type="Camping_Item__c"/>
</aura:event>
3

I think event is getting fired you are not able to handle it because aura handler is not having having same name as registered Event.

<aura:handler name="addItem" event="c:addItemEvent"
        action="{!c.handleAddItem}"/>

change it to

<aura:handler name="updateCampingItem" event="c:addItemEvent"
        action="{!c.handleAddItem}"/>

Name of component event in both registerevent and handler should be same.

  • This is good to know! I might have missed this in the lesson they provided. Works great now. Thanks for the help. – John Sep 24 '19 at 17:25

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.