1

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?

  • Have you checked the name of your event? Also, perhaps try making a simpler event and using that. Try defining the event in the developer console rather than sublime - I sometimes find the event has not even been created in the org when saving from sublime. – Caspar Harmer Jul 8 '17 at 1:45
  • Can you try removing the name if its an application event? – RedDevil Jul 8 '17 at 2:58
  • Hey guys, thanks for the help. Caspar I checked the name of the event, substituted two other events, and have defined all my events in the developer console. Still no dice... RedDevil I tried removing the name from the application event (I assume you mean on the aura:registerEvent tag) and I got this error: Failed to save undefined: 0Ad5B0000008skr:3,73: name is a required attribute on tag registerevent: Source – Ben d'Straw Jul 10 '17 at 15:30
0

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.

  • This is exactly what I was looking for! For some reason I never thought to try adding onkeyup on the div, only the lightning input. For some reason valueRender never worked for me before (probably because I had all that weird addListener stuff) but now its working fine. Thanks a ton!! – Ben d'Straw Jul 28 '17 at 17:19
1

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

  • Good to know. There was another question on sfse last night that had problems with setCallBack too - totally different ones, but it seems it's something to be pretty careful of. – Caspar Harmer Jul 12 '17 at 20:09

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.