0

I have a lightning component that I am adding a click event listener as part of the afterRender. The problem I have is that I want it to fire an event but the event is coming back as undefined.
here is my afterRender

({
afterRender : function(cmp, helper){
    var viewDiv = document.getElementById(cmp.get("v.parentDiv")+"-view");
    var editDiv = document.getElementById(cmp.get("v.parentDiv")+"-edit");


    viewDiv.addEventListener("click", function () {
        viewDiv.classList.add("slds-hide");
        editDiv.classList.remove("slds-hide");
        editDiv.classList.add("ux-mode-edit");

        var myEvent = $A.get("e.c:myEvent");
        var myEventParams = cmp.get("v.myEventParams");
        var params = "";
        for (var i = 0; i < myEventParams.length; i++) {
            params += "\"" + myEventParams[i].label + "\" : \"" + myEventParams[i].value + "\",";
        }
        params = params.slice(0, params.length - 1);

        myEvent.setParams({
            "eventType": cmp.get("v.myEventType"),
            "params": { params }
        });
        myEvent.fire();

    }, false);
}
})

here is my event

<aura:event type="APPLICATION"  >
     <aura:attribute name="params" type="Object"/>
     <aura:attribute name="eventType" type="String"/>
</aura:event>

the problem is in the line var myEvent = $A.get("e.c:myEvent");. $A.get("e.c:myEvent") cannot be found. I have tried a couple of different events and get the same thing with all of them.

  • Have you registered the event in your component from where you are firing this? Also seems you have different attribute names defined in the event and that you are using different names in your JS controller. – Jayant Das Nov 27 '18 at 2:46
0

You need to use $A.getCallback in order to create a handler that can interact with Aura. In addition, converting the list to an object is incorrect. Here's a corrected version of your code:

({
    afterRender : function(cmp, helper){
        var viewDiv = document.getElementById(cmp.get("v.parentDiv")+"-view");
        var editDiv = document.getElementById(cmp.get("v.parentDiv")+"-edit");
        viewDiv.addEventListener("click", $A.getCallback(function () {

            viewDiv.classList.add("slds-hide");
            editDiv.classList.remove("slds-hide");
            editDiv.classList.add("ux-mode-edit");

            var myEvent = $A.get("e.c:myEvent");
            var myEventParams = cmp.get("v.myEventParams");
            var params = myEventParams.reduce(
                function(map, obj) { 
                    map[obj.label] = obj.value; 
                    return map;
                }, {});
            myEvent.setParams({
                "eventType": cmp.get("v.myEventType"),
                "params": params
            });
            myEvent.fire();

        }), false);
    }
})

Make sure that you register your event in the component code in order to gain access to it.

<aura:registerEvent name="myEvent" type="c:myEvent" />
  • Thank you the $A.getCallback was exactly what I was missing. – Travis Nov 27 '18 at 13:16

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.