+ Start a Discussion
pooja biswaspooja biswas 

lightning component not working

Hi 
I am newbie to lightning components
scenario: The user will enter contact name in an inputtext box and it will show contact firstname and phone, when he clicks on the contact name
               hyperlink then it will show further details of contact object.

I have  created a static resource for bootstrap and I am calling the classes in the component & application
// 1. apex class to handle server side methods
public class ContactController 
{
   @AuraEnabled  
   public static List<Contact> FindAll()
   {
      return [select ID,Name,Phone from Contact LIMIT 20];
   }
   
    //Get contacts based on Contact Name
    @AuraEnabled
    public static List<Contact> FindByName(String searchKey)
   {
      String name='%'+searchKey+'%';
       return [select ID,Name,Phone from Contact where Name LIKE:name LIMIT 100];
   }
    
    //Get contacts based on Contact ID, single record
    @AuraEnabled
    public static Contact FindByID(String conID)
   {
      return [select ID,Name,Account.Name,Phone from Contact where ID=:conID LIMIT 100];
   }
}

// 2 lightning component : contactList_comp
<aura:component controller="ContactController">
    
	<aura:attribute name="contacts1"
                    type="Contact[]"/>  
    
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}"/>
    
    <ul class="list-group">
        <aura:iteration items="{!v.contacts1}"
                        var="con">
        <li class="list-group-item">
            <a href="{!'#con/'+con.ID}">
                <p>{!con.Name}</p>
                <p>{!con.Phone}</p>
            </a>
        </li>
   </aura:iteration>
    </ul>
</aura:component>

// 3 . client side controller for the component
({
	doInit : function(cmp,event)
    {
	    var action=cmp.get("c.FindAll");
        action.setCallback(this,function(a)
        {
            cmp.set("v.contacts1",a.getReturnValue());
                        
        });
        $A.enqueueAction(action);
  	},
    
    searchkeychange : function(cmp,event,helper)
    {
	    var search_key=event.getParam("c.searchkey1");
        var action=cmp.get("c.FindByName");
        
        action.setParams({"search_key":searchkey1});
        
        action.setCallback(this,function(a)
        {
           cmp.set("v.contacts1",a.getReturnValue());
        });
        $A.enqueueAction(action);
	}
})

//4 search bar component
<aura:component >
	<input type="text"
           class="form-control"
           onkeyup="{!c.searchkeychange}"
           placeholder="Enter contact Name">
    </input>
</aura:component>

//5 client side controller for search bar component
({
	searchkeychange:function(component,event,helper) 
    {
		var myEvent=$A.get("e.c:searchkeychange"); 
        
        myEvent.setParams({"searchkey1":event.target.value});
       
        myEvent.fire(); 
  	}
})

// 6 event for search bar component
<aura:event type="APPLICATION" 
            description="Event template">

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

//7. Now I create a an application
<aura:application >
    <link href='/resource/bootstrap/' 
          rel="stylesheet">
    </link>
    
    <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_comp />
                   <c:ContactList_comp />
              </div>
                   
        </div>
    </div>    
</aura:application>
when I preview the app, it displays list of contacts but when I enetr any contact name in textbox , it throws an error as follows:

" This page has an error. You might just need to refresh it. Action failed: c$searchbar_comp$controller$searchkeychange [myEvent is undefined] Failing descriptor: {c$searchbar_comp$controller$searchkeychange} "

Please help me out in understad this.

Thanks
pooja 



 
Best Answer chosen by pooja biswas
sfdcMonkey.comsfdcMonkey.com
ok here is working complete code

apex class(ContactController.apxc)
public class ContactController 
{
   @AuraEnabled  
   public static List<Contact> FindAll()
   {
      return [select ID,Name,Phone from Contact LIMIT 20];
   }
   
    //Get contacts based on Contact Name
    @AuraEnabled
    public static List<Contact> FindByName(String searchKey_server)
   {
      String name='%'+searchKey_server+'%';
       return [select ID,Name,Phone from Contact where Name LIKE:name LIMIT 100];
   }
    
    //Get contacts based on Contact ID, single record
    @AuraEnabled
    public static Contact FindByID(String conID)
   {
      return [select ID,Name,Account.Name,Phone from Contact where ID=:conID LIMIT 100];
   }
}
searchbar_comp component (searchbar_comp.cmp)
<aura:component >
   <aura:registerEvent name="searchkeychange" type="c:searchkeychange"/>
	<input type="text"
           class="form-control"
           onkeyup="{!c.searchkeychange}"
           placeholder="Enter contact Name">
    </input>
</aura:component>
searchbar_comp controller (searchbar_compController.js)
({
	searchkeychange:function(component,event,helper) 
    {
		var myEvent = $A.get("e.c:searchkeychange"); 
        myEvent.setParams({"searchkey1":event.target.value});
        myEvent.fire(); 
  	}
})
contactList_comp component (contactList_comp.cmp)
<aura:component controller="ContactController">
    
	<aura:attribute name="contacts1"
                    type="Contact[]"/>  
    
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}"/>
    <aura:handler event="c:searchkeychange" action="{!c.handleApplicationEvent}"/>    
     
    <ul class="list-group">
        <aura:iteration items="{!v.contacts1}"
                        var="con">
        <li class="list-group-item">
            <a href="{!'/'+ con.Id}">
                <p>{!con.Name}</p>
                <p>{!con.Phone}</p>
            </a>
        </li>
   </aura:iteration>
    </ul>
</aura:component>
contactList_comp controller (contactList_compController.js)
({
	doInit : function(cmp,event)
    {
	    var action=cmp.get("c.FindAll");
        action.setCallback(this,function(a)
        {
            cmp.set("v.contacts1",a.getReturnValue());
                        
        });
        $A.enqueueAction(action);
  	},
    
    handleApplicationEvent : function(cmp,event,helper)
    {
      
	    var search_key= event.getParam("searchkey1");
         alert('search_key---- > ' + search_key);
        var action=cmp.get("c.FindByName");
        
        action.setParams({"searchKey_server":search_key});
        
        action.setCallback(this,function(a)
        {
            alert(a.getReturnValue());
           cmp.set("v.contacts1",a.getReturnValue());
        });
        $A.enqueueAction(action);
	}
  })
searchkeychange event (searchkeychange.evt)
<aura:event type="APPLICATION" 
            description="Event template">

    <aura:attribute name="searchkey1"
                    type="String">
    </aura:attribute>
</aura:event>
app.app
<aura:application >
    
  <link href='/resource/bootstrap/' 
          rel="stylesheet">
    </link>
    
    <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_comp />
                   <c:contactList_comp />
              </div>
                   
        </div>
    </div>    
</aura:application>


thanks
let me inform if it helps you








 

All Answers

pooja biswaspooja biswas
Hi piyush
I made modification highlighted in bold italic as follows:
public class ContactController 
{
   @AuraEnabled  
   public static List<Contact> FindAll()
   {
      return [select ID,Name,Phone from Contact LIMIT 20];
   }
   
    //Get contacts based on Contact Name
    @AuraEnabled
    public static List<Contact> FindByName(String searchKey_server)
   {
      String name='%'+searchKey_server+'%';
       return [select ID,Name,Phone from Contact where Name LIKE:name LIMIT 100];
   }
    
    //Get contacts based on Contact ID, single record
    @AuraEnabled
    public static Contact FindByID(String conID)
   {
      return [select ID,Name,Account.Name,Phone from Contact where ID=:conID LIMIT 100];
   }
}

<aura:component controller="ContactController">
    
	<aura:attribute name="contacts1"
                    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.contacts1}"
                        var="con">
        <li class="list-group-item">
            <a href="{!'#con/'+con.ID}">
                <p>{!con.Name}</p>
                <p>{!con.Phone}</p>
            </a>
        </li>
   </aura:iteration>
    </ul>
</aura:component>

({
	doInit : function(cmp,event)
    {
	    var action=cmp.get("c.FindAll");
        
        action.setCallback(this,function(a)
        {
           cmp.set("v.contacts1",a.getReturnValue());
        });
        $A.enqueueAction(action);
  	},
    SearchKeyChange : function(cmp,event)
    {
	    var search_key=event.getParam("c.searchkey1");
        alert('search_key---- > ' + search_key);
        var action=cmp.get("c.FindByName");
        
        action.setParams({"search_key":searchKey_server});
      
        action.setCallback(this,function(a)
        {
             alert(a.getReturnValue());
             cmp.set("v.contacts1",a.getReturnValue());
        });
        $A.enqueueAction(action);
	}
})

<aura:component> 
<aura:registerEvent name="searchkeychange" 
                    type="c:searchkeychange"/> 
<input type="text" 
       class="form-control" 
       onkeyup="{!c.searchkeychange}" 
       placeholder="Enter contact Name"> </input> 
</aura:component>
Rest of the code is same as u posted.

But I am getting the same error as above.
Also when I save the contactList_comp  I get an error as 

Failed to save undefined: No EVENT named markup://c:searchkeychange found : [markup://c:ContactList_comp]: Source

Thanks Pooja
 
pooja biswaspooja biswas
Hi sorry
I am not getting you. where to check for applicaiton event name?
In my first post I have given entire code.

 
sfdcMonkey.comsfdcMonkey.com
ok here is working complete code

apex class(ContactController.apxc)
public class ContactController 
{
   @AuraEnabled  
   public static List<Contact> FindAll()
   {
      return [select ID,Name,Phone from Contact LIMIT 20];
   }
   
    //Get contacts based on Contact Name
    @AuraEnabled
    public static List<Contact> FindByName(String searchKey_server)
   {
      String name='%'+searchKey_server+'%';
       return [select ID,Name,Phone from Contact where Name LIKE:name LIMIT 100];
   }
    
    //Get contacts based on Contact ID, single record
    @AuraEnabled
    public static Contact FindByID(String conID)
   {
      return [select ID,Name,Account.Name,Phone from Contact where ID=:conID LIMIT 100];
   }
}
searchbar_comp component (searchbar_comp.cmp)
<aura:component >
   <aura:registerEvent name="searchkeychange" type="c:searchkeychange"/>
	<input type="text"
           class="form-control"
           onkeyup="{!c.searchkeychange}"
           placeholder="Enter contact Name">
    </input>
</aura:component>
searchbar_comp controller (searchbar_compController.js)
({
	searchkeychange:function(component,event,helper) 
    {
		var myEvent = $A.get("e.c:searchkeychange"); 
        myEvent.setParams({"searchkey1":event.target.value});
        myEvent.fire(); 
  	}
})
contactList_comp component (contactList_comp.cmp)
<aura:component controller="ContactController">
    
	<aura:attribute name="contacts1"
                    type="Contact[]"/>  
    
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}"/>
    <aura:handler event="c:searchkeychange" action="{!c.handleApplicationEvent}"/>    
     
    <ul class="list-group">
        <aura:iteration items="{!v.contacts1}"
                        var="con">
        <li class="list-group-item">
            <a href="{!'/'+ con.Id}">
                <p>{!con.Name}</p>
                <p>{!con.Phone}</p>
            </a>
        </li>
   </aura:iteration>
    </ul>
</aura:component>
contactList_comp controller (contactList_compController.js)
({
	doInit : function(cmp,event)
    {
	    var action=cmp.get("c.FindAll");
        action.setCallback(this,function(a)
        {
            cmp.set("v.contacts1",a.getReturnValue());
                        
        });
        $A.enqueueAction(action);
  	},
    
    handleApplicationEvent : function(cmp,event,helper)
    {
      
	    var search_key= event.getParam("searchkey1");
         alert('search_key---- > ' + search_key);
        var action=cmp.get("c.FindByName");
        
        action.setParams({"searchKey_server":search_key});
        
        action.setCallback(this,function(a)
        {
            alert(a.getReturnValue());
           cmp.set("v.contacts1",a.getReturnValue());
        });
        $A.enqueueAction(action);
	}
  })
searchkeychange event (searchkeychange.evt)
<aura:event type="APPLICATION" 
            description="Event template">

    <aura:attribute name="searchkey1"
                    type="String">
    </aura:attribute>
</aura:event>
app.app
<aura:application >
    
  <link href='/resource/bootstrap/' 
          rel="stylesheet">
    </link>
    
    <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_comp />
                   <c:contactList_comp />
              </div>
                   
        </div>
    </div>    
</aura:application>


thanks
let me inform if it helps you








 
This was selected as the best answer
sfdcMonkey.comsfdcMonkey.com
or if you have any issue with above code you can ask here or mail me on sfdcjaipur@gmail.com
pooja biswaspooja biswas
Hi piyush
sorry for the delay
I deleted all the files and redid the entire code again now its working.
I guess the issue was with the searchkey parameter.
Also in SearchBar.cmp, I did not use    <aura:registerEvent name="searchkeychange" type="c:searchkeychange"/>
Thanks for ur help, sure I will get back further if any doubts.

pooja