Getting 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')]

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?

March 17, 2023
·
Answer
·
Like
0
·
Follow
0

Shri Raj
It looks like there is a typo in your code. In your ContactList.cmp component, you have specified the event name as c:SearchKeyEvent, but in your ContactListController.js controller, you have used c:SearchKeyChange as the event name.
To fix the error, you need to update the event name in ContactList.cmp to c:SearchKeyChange to match the event name used in ContactListController.js.
Here's the updated ContactList.cmp component code:

<aura:component controller="ContactController"> <aura:attribute name="contacts" type="Contact[]"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <aura:handler event="c:SearchKeyChange" 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>

March 18, 2023
·
Like
0
·
Dislike
0

DP Mishra
Thank you Shri Raj for your answer. I changed the code as folloing. But still no luck.

QuickContcts.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:SearchBar/>
<c:ContactList/>
</div>
<div class="col-sm-8">
   <c:ContactDetails/>
   </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:SearchKeyChange" 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);
}
})

SearchKeyChange.evt
<aura:event type="APPLICATION">
<aura:attribute name="searchKey" type="String"/>
</aura:event>

SearchBar.cmp
<aura:component>
<input type="text" class="form-control" onkeyup="{!c.searchKeyChange}"
placeholder="Search"/>
</aura:component>

SearchBarController.js
({
searchKeyChange: function(component, event, helper) {
var myEvent = $A.get("e.SearchKeyChange");
myEvent.setParams({"searchKey": event.target.value});
myEvent.fire();
}
})

ContactDetail.cmp
<aura:component controller="ContactController">
<aura:attribute name="contact" type="Contact" default="{'sobjectType': 'Contact'}"/>
<aura:handler event="aura:locationChange" action="{!c.locationChange}"/>
<div class="details">
<h1>{!v.contact.Name}</h1>
<h3>{!v.contact.Account.Name}</h3>
<h3>{!v.contact.Title}</h3>
<p>{!v.contact.Phone}</p>
{!v.contact.MobilePhone}
</div>
</aura:component>

ContactDetailController.js
({
locationChange : function(component, event, helper) {
var token = event.getParam("token");
if(token!=null) {
if (token.indexOf('contact/') === 0) {
var contactId = token.substr(token.indexOf('/') + 1);
var action = component.get("c.findById");
action.setParams({
"contactId": contactId
});
action.setCallback(this, function(a) {
component.set("v.contact", a.getReturnValue());
});
$A.enqueueAction(action);
}
}
}
})

March 21, 2023
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Getting 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')]

You need to sign in to do that.