2

I have two components in which one is parent and other one is obviously child. I have a ui:inputtext in child component and on keyup event, I am handling fired event in parent component. But it is not handling it properly. I am registering my event in child component and then firing it from child's JS controller, which should in turn call parent's JS method. But it is not. I am posting my code as well:

Child Component.

<aura:component >
<aura:attribute name="name" type="String"/>
<aura:registerEvent name="searchContact" type="c:contactListSearchFormEvent" /> -->
<div class="slds-form-element">
<label class="slds-form-element__label" for="inputSample2">Filter</label>
<div class="slds-form-element__control">
  <ui:inputText value="{! v.name}"  aura:id="name" class="slds-input" placeholder="Contact Name" keyup="{! c.refineList}"/>
</div>

Child Controller:

({
refineList : function(component, event, helper) {
    var nameField = component.find("name");
    var name = nameField.get("v.value");
    console.log(name);
    var searchEvent = component.getEvent("searchContact");
    console.log(searchEvent);
    searchEvent.setParams({
        "searchKey" : name 
    });
    searchEvent.fire();
    console.log("after fire");
}})

Parent Component:

<aura:component controller="ContactListController">
<aura:attribute name="contacts" type="Contact[]"/>
<aura:handler name="init" action="{! c.doInit}" value="{! this}"/>
<aura:handler name="refineList" action="{! c.refineList}" event="c:contactListSearchFormEvent"/>
<c:contactListSearchForm />
<ul class="slds-list--top">
    <aura:iteration items="{! v.contacts}" var="contact">
        <div class="slds-box slds-box--small">
        <li class="slds-item"><a href="{! '/'+ contact.Id}">{! contact.Name}</a></li>
        <li class="slds-item">{! contact.Phone}</li>
            </div>
    </aura:iteration>
</ul>

Parent Controller:

({
refineList : function(component, event, helper){
    var action = component.get("c.findByName");
    var name = event.getParam("searchKey");
    action.setParams({
        "searchKey" : name
    });
    action.setCallback(this, function(response){
        var state = response.getState();
        console.log("inside status block" + status);
        if(component.isValid() && state === "SUCCESS"){
            component.set("v.contacts", response.getReturnValue());
        }
    });
}})

Here goes my Event:

<aura:event type="COMPONENT">
<aura:attribute name="searchKey" type="String" />

I am unable to solve this issue. I am not very experienced with events, so may be missing something.

8

The bug in your code is at <aura:handler name="refineList" action="{! c.refineList}" event="c:contactListSearchFormEvent"/>

  1. you must use same name that you gave in registered event <aura:handler name="searchContact" action="{! c.refineList}" event="c:contactListSearchFormEvent"/>

The name attribute in <aura:handler> must match the name attribute in the <aura:registerEvent> tag in the component that fires the event.

| improve this answer | |
  • thanks, that worked for me, and I did a very silly mistake of not calling apex method from JS controller. But now it's working. One more issue I am facing is that value from ui:inputtext is not reflected in component name attribute as soon as a key is pressed or say released after pressing. It takes some time or first I have to remove focus from text box and then move the focus again to text box. Why is it? – Ashish Sharma May 12 '17 at 11:23

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.