0

I am having a problem with some aura components that communicate after an aura event, and for some reason that I can't find, the component that has the handler, this last one is triggered twice. These components are not parent and child, and are located in completely different parts of the community page. This is the code:

Registrer events source component

<aura:registerEvent name="eventAplication_Sample_Request_addProductToOrder" type="c:eventAplication_Sample_Request_addProductToOrder"/>
<aura:registerEvent name="eventAplication_Sample_Request_deleteProductToOrder" type="c:eventAplication_Sample_Request_deleteProductToOrder"/>
<aura:registerEvent name="EVENT_APP_LoginRegisterForAction" type="c:EVENT_APP_LoginRegisterForAction"/>

<button disabled="{!v.disabled}" class="product-request__button" onclick="{!c.onclick}">{!$Label.c.Anadir_a_la_cesta}</button>

Method controller JS source component

onclick : function(component, event, helper) {
    event.preventDefault();
    event.stopPropagation();
    if(component.get("v.accountId") !== undefined){
         component.set("v.disabled",true);
        var quantityIni = component.get("v.quantityIni");
        var item = component.get("v.item");
        var quantity = item.orderItem.Quantity__c;
        if(quantity > 0){
            var description = component.get("v.description");
            var colorId = item.Id;
            helper.onclick_addProductToOrder(component, event, helper, quantity, description, colorId);
        }
        
         component.set("v.disabled",false);
    }else{
        var evt = $A.get("e.c:EVENT_APP_LoginRegisterForAction");
        evt.setParams({ 
            "title": $A.get("$Label.c.Solicita_tu_muestra2"),
            "urlLogin": $A.get("$Label.c.SYSTEM_URL_PUBLIC_COMMUNITY") + 'login/?startURL=/s/product2/' + component.get("v.item.Id"),
            "urlRegister": $A.get("$Label.c.SYSTEM_URL_PUBLIC_COMMUNITY") + 'register/'
        });
        evt.fire();
    }
}

Method helper JS source component

onclick_addProductToOrder : function(component, event, helper, quantity, description, colorId) {

    var action = component.get("c.canAddMoreSamplesToSampleRequestOrder");
    action.setParams({ accountId : component.get("v.accountId") , quantity : quantity, colorId : colorId, run:true});

    action.setCallback(this, function(response) {

        var state = response.getState();
        //alert(response.getState());
        //alert(response.getReturnValue());
        if (state === "SUCCESS") {
            var timestamp=Date.now();
            if(response.getReturnValue() == true){
                var evt = $A.get("e.c:eventAplication_Sample_Request_addProductToOrder");
                evt.setParams({ "accountId": component.get("v.accountId"),
                               "contactId": component.get("v.contactId"),
                               "quantity": quantity,
                               "unitPrice": 0,
                               "description": description,
                               "colorId": colorId,
                               "timestamp" : timestamp
                              });
                evt.fire();
                component.find("sampleRequestChannel").publish({Id: component.get("v.item").Id, Quantity : quantity});

                var modal = component.find("modalInfo");
                component.set("v.textInfoAction",component.get("v.textInfoAdd"));
                modal.openModal();
                
                component.set("v.disabled",false);
            }else{
                var modal = component.find("modalInfo");
                component.set("v.textInfoAction",component.get("v.textInfoAddErrorLimit"));
                modal.openModal();
                component.set("v.disabled",false);
                
            }
        }
    });
    $A.enqueueAction(action);  
}

Aura event type="APPLICATION"

<aura:attribute name="accountId" type="Id"/>
<aura:attribute name="contactId" type="Id"/>
<aura:attribute name="quantity" type="Decimal"/>
<aura:attribute name="unitPrice" type="Decimal"/>
<aura:attribute name="description" type="String"/>
<aura:attribute name="colorId" type="Id"/>
<aura:attribute name="timestamp" type="Decimal"/>

Handlers events receiver component

<aura:handler name="change" value="{!v.user}" action="{!c.doInit}"/>

<aura:registerEvent name="eventAplication_InitColorSelected" type="c:eventAplication_InitColorSelected"/>
<aura:registerEvent name="EVT_Lock_Screen" type="c:EVT_Lock_Screen"/>

<aura:handler name="eventComponentRemoveCmp" action="{!c.removeComponent}" event="c:eventComponentRemoveCmp"/>
<aura:handler event="c:eventAplication_Sample_Request_addProductToOrder" action="{!c.actionEventAplication_Sample_Request_addProductToOrder}"/>
<aura:handler event="c:eventAplication_Sample_Request_deleteProductToOrder" action="{!c.actioneventAplication_Sample_Request_deleteProductToOrder}"/>
<aura:handler event="c:eventAplication_getInitColorSelected" action="{!c.eventAplication_getInitColorSelected}"/>
<aura:handler event="c:eventAplication_GetProductToOrder" action="{!c.doInit}"/>
<!-- Refresca el carrito cuando la order pasa a Activated -->
<aura:handler event="c:EVT_refreshDatasToOrder" action="{!c.doInit}" />

Method controller JS receiver component

actionEventAplication_Sample_Request_addProductToOrder : function(component, event, helper) {
    var description = event.getParam("description");
    var accountId = event.getParam("accountId");
    var contactId = event.getParam("contactId");
    var quantity = event.getParam("quantity");
    var colorId = event.getParam("colorId");
    var unitPrice = event.getParam("unitPrice");
    var action = component.get("c.sample_request_addProductToOrder");
    action.setParams({ 
            accountId : accountId, 
            contactId : contactId,
            quantity : quantity, 
            unitPrice : unitPrice, 
            description : description,
            colorId : colorId
        });
        action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {
            var u = component.get("v.user");
            helper.helperActionGetProductToOrder(component, event, helper, u);
        }
    });
    $A.enqueueAction(action);
    event.preventDefault();
    event.stopPropagation();
}

I have tried stopping and controlling the event, both with the event.preventDefault() and event.stopPropagation() methods in different parts of the code, including placing a flag on the onclick event, but it still launches the receiving component twice. I'm not sure if the problem is in the handler of the receiver component, if the aura event itself or something I missed.

Thank you all in advance!

2
  • are you sure eventAplication_Sample_Request_addProductToOrder event firing only once?
    – sdandamud1
    Commented Jul 23, 2022 at 1:19
  • Well... now you're making me doubt. I know that tracing, I have detected as that they generated two instances of the receiving component of the event, then I do not know if it is a problem of the fire of the source component, if the event aura... how could I trace if they are firing two or more times? Commented Jul 25, 2022 at 9:23

0

You must log in to answer this question.

Browse other questions tagged .