Hello Team,
I am getting the following error -
This page has an error. You might just need to refresh it. Action failed: c:ContactListSearch$controller$searchKeyChange [Cannot read properties of undefined (reading 'setParams')] Failing descriptor: {c:ContactListSearch$controller$searchKeyChange}
while running the app with the following code.
QuickContacts.app
<aura:application>
<link href='/resource/bootstrap/' rel="stylesheet"/>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">Lightning Contacts</a>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12">
<c:ContactListSearch/>
<c:ContactList/>
</div>
</div>
</div>
</aura:application>
ContactList.cmp
<aura:component controller="ContactController">
<aura:attribute name="contacts" type="Contact[]"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler event="c:SearchKeyEvent" action="{!c.searchKeyChange}"/>
<ul class="list-group">
<aura:iteration items="{!v.contacts}" var="contact">
<li class="list-group-item">
<a href="{! ' #contact/' + contact.Id }">
<p>{!contact.Name}</p>
<p>{!contact.Phone}</p>
</a>
</li>
</aura:iteration>
</ul>
</aura:component>
ContactListController.js
({
doInit : function(component, event)
{
var action=component.get("c.findAll");
action.setCallback(this,function(a)
{
component.set("v.contacts",a.getReturnValue());
});
$A.enqueueAction(action);
},
searchKeyChange: function(component, event) {
var searchKey = event.getParam("searchKey");
var action = component.get("c.findByName");
action.setParams({
"searchKey": searchKey
});
action.setCallback(this, function(a) {
component.set("v.contacts", a.getReturnValue());
});
$A.enqueueAction(action);
}
})
ContactListSearch.cmp
<aura:component >
<input type="text" class="form-control" placeholder="Search" onkeyup="{!c.searchKeyChange}"/>
</aura:component>
SearchKeyEvent.evt
<aura:event type="APPLICATION" access="global">
<aura:attribute name="searchKey" type="String"/>
</aura:event>
ContactListSearchController.js
({
searchKeyChange : function(component, event, helper) {
var myEvent = $A.get("e.c:SearchKeyChange");
myEvent.setParams({"searchKey":event.target.value});
myEvent.fire();
}
})
Can anyone please help me to find the error?
