0

I have this Event named - "productAddItem", an Application Type -

<aura:event type="application">
    <aura:attribute name="products" type="String" />
</aura:event>

with Parent Component "Product.cmp"-

<aura:component>
    <c:Middleman />
    <c:productForm />
</aura:component>

Sibling 1 "Middleman.cmp"-

<aura:component >
    <aura:attribute name="var" type="String" default="VAL" />
    <aura:registerEvent name="addProduct" type="c:productAddItem" />
    <ui:button label="AddProduct" press="{!c.handleAddProducto}" />
</aura:component>

Sibling 1 COntroller "MiddlemanController.js" -

({
handleAddProducto : function(component, event, helper) {
    var products = component.get("v.var");
    var createEvent = component.getEvent("addProduct");
    createEvent.setParams({"products" : products});
    createEvent.fire();
}
})

Sibling 2 Component "productForm.cmp"-

<aura:component >
<aura:attribute name="var" type="String" default="VAL" />
<aura:registerEvent name="addProduct" type="c:productAddItem" />
<ui:button label="AddProduct" press="{!c.handleAddProducto}" />
</aura:component>

Sibling 2 COntroller "productFormController.js"-

({
handleAddProducto : function(component, event, helper) {
    var products = component.get("v.var");
    var createEvent = component.getEvent("addProduct");
    createEvent.setParams({"products" : products});
    createEvent.fire();
}
})

When I am Firing the Event from Middleman, it doesn't get handled in productForm Component. What could be the Issue?

0

There are couple of this which needs to be fixed:- 1. Need to add event handler in productForm Component. 2. Ned to correct the way of firing of application event.

var createEvent = $A.get("e.c:productAddItem");

Middleman.cmp

<aura:component >
<aura:attribute name="var" type="String" default="VAL" />
<aura:registerEvent name="addProduct" type="c:productAddItem" />
<ui:button label="AddProduct" press="{!c.handleAddProducto}" />
</aura:component>

MiddlemanController.js

 ({
    handleAddProducto : function(component, event, helper) {
    var products = component.get("v.var");
    var createEvent = $A.get("e.c:productAddItem");
    createEvent.setParams({"products" : products});
    createEvent.fire();
 }
})

productForm.cmp

<aura:component >
<aura:attribute name="var" type="String" default="VAL" />
<aura:handler event="c.productAddItem" action="{!c.handleAddProducto}"/>
</aura:component>

productFormController.js

({
   handleAddProducto : function(component, event, helper) {
   var capturedAppEvent = event.getParam("products");
   alert("Hello "+capturedAppEvent);
}
})
0

Your MiddleMan and productForm components are completely independent and have no knowledge of each other, so they need to communicate using Events.

Both of your components have a handleAddProductTo function which is firing the addProduct product event, but neither of them are listening to this event.

To fix this you'll need to add an event handler to productForm.cmp:

<aura:component >
  <aura:attribute name="var" type="String" default="VAL" />
  <aura:registerEvent name="addProduct" type="c:productAddItem" />
  <aura:handler event="c:productAddItem" action="{!c.handleProductAddItemEvent}"/>
  <ui:button label="AddProduct" press="{!c.handleAddProducto}" />
</aura:component>

And in your productFormController.js you need to add another function to handle this:

({
  handleProductAddItemEvent: function(component, event, helper) {
    // handle the event as you need in here
  },

  handleAddProducto : function(component, event, helper) {
      // as before
  }
})

You'll need to consider that your productForm.handleAddProductto implementation also fires this event which means the new handler will be called then too, which may or not be the behaviour you want.

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.