$A.get("e.c:applicationEvent") always returns undefined

Question

I have no idea what's going wrong, so I'll just paste all the code I've got and let you share in the madness. Basically I want to fire an application event that takes the value from a lightning:input search bar as an attribute (lightning:input - search never worked for me so I'm trying to build a generic workaround component). Problem is I always get this error:

Uncaught TypeError: Cannot read property 'setParams' of undefined throws at components/c/CCW_Generic_Searchbar.js:65:14

I set up everything the way I always do, basically copied and pasted from other working components, but nothing I do fixes it. Remade the event, rewrote everything, I'm out of ideas. Any advice would be greatly appreciated.

.cmp:

<aura:registerEvent name="CCW_Generic_Searchbar_Event_2" type="c:CCW_Generic_Searchbar_Event_2"/>
<aura:handler event="c:CCW_Generic_Searchbar_Event_2" action="{!c.handleSearch}"/>

<aura:attribute name="label" type="String" default="Search"/>
<aura:attribute name="placeHolder" type="String" default="Search"/>
<aura:attribute name="id" type="String" default="-1"/>

<aura:attribute name="GlobalId" type="String" access="GLOBAL" description="super id" />
<aura:attribute name="input" type="String"/>
<aura:attribute name="output" type="String" default="output"/> 
<aura:attribute name="initialized" type="Boolean" default="false"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler name="change" value="{!v.initialized}" action="{!c.onRender}"/>


<div id="{!GlobalId + '_search'}">
    <form>
        <lightning:input type="search" label="Search" name="search" aura:id="bar" placeholder="{!v.placeHolder}"/>
    </form>
</div>

<h1>{!v.output}</h1>

controller.js:

doInit : function(component, event, helper){

    component.set("v.initialized", true);
    console.log('end doInit');

},

onRender : function(component, event, helper) {

    console.log('in onRender 1');

    setTimeout(function(){
        var searchId = component.getGlobalId() + '_search';

        console.log('in onRender 2, searchId = '+searchId);

        document.getElementById(searchId).addEventListener("keyup", function(e) {

            console.log('in onRender 3 event listener');

            if ((e.keyCode || e.which) == 13) {
                console.log('in onRender 4 enter');

                var id = component.get("v.id");
                var input = component.get("v.input");
                component.set("v.input", '');

                helper.runSearch(component);


            } else {
                console.log('in onRender 5 else');
                helper.inputChange(component);
            }
        });

    }, 100);

    console.log('in onRender 6 end on render');

},

handleSearch : function(component, event, helper){

    console.log('search handled');

    var id = event.getParam("idn");
    var input = event.getParam("input");
    var output = 'output: id = '+id+', search = '+input;
    component.set("v.output", output);

}

helper.js:

runSearch : function(component) {

    console.log('in runSearch 1');
    var event = $A.get("e.c:CCW_Generic_Searchbar_Event_2");
    event.setParams({"input": input, "idn":String(id)});
            console.log(event);
    event.fire();

},

inputChange : function(component){

    console.log('in inputChange 1');

    var value = component.find('bar').get('v.value');
    component.set("v.input", value);

}

event.evt:

<aura:event type="APPLICATION" description="Generic Search Event">
    <aura:attribute name="input" type="String"/>
    <aura:attribute name="idn" type="String"/>
</aura:event>

I suspect it has something to do with how the event is being registered?

Answer 1

I don't exactly have an answer for you... more a way of getting around your problems. Please let me know if I'm barking up the wrong tree...

First - why can't you add an onkeyup event in the markup?

Second - you don't need that timeout - you should be listening for the valueRender event, which ensures that everything is rendered for you.

So the affected markup would be:

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler name="render" value="{!this}" action="{!c.onRender}"/>

<div id="{!GlobalId + '_search'}" onkeyup="{!v.handleKeyup}">
  <lightning:input type="search" label="Search" name="search" aura:id="bar" placeholder="{!v.placeHolder}"/>
</div>

<h1>{!v.output}</h1>

Your handleKeyup method could be:

handleKeyup : function(component) {
  if ((e.keyCode || e.which) == 13) {
    component.set("v.input", '');
    helper.runSearch(component);
  } 
  else {
    helper.inputChange(component);
  }
},

This way you don't need change handlers, setTimeout or setCallback - it's all within the framework, so should work fine.

Answer 2

Figured it out! So I'm pretty sure the issue was related to salesforce requiring $A.setCallback on certain event listeners/timeouts. Apparently if you leave this out it can mess with your event calls, but there's a simple trick that solves the problem without even needing $A.getCallback. Instead of calling helper.runSearch() inside the eventListener/timeout blocks to fire the event, I set a string attribute called lastSearch to the input value. Then I added a change handler for the lastSearch attribute that called a function to fire the event. Moral of the story was: if you ever find yourself screwed by JS functions running outside the normal rendering lifecycle, pass whatever values you need to attribues in your .cmp, then fire a change handler to do whatever didn't work

Answer 3

I've just found that, instead of

var event = $A.get(“e.c:applicationEvent”)

which started returning undefined, you can use

let event = component.getEvent("applicationEvent");

I got this syntax from the trailhead https://trailhead.salesforce.com/content/learn/modules/lex_dev_lc_basics/lex_dev_lc_basics_events