• Mars Rover 1622
  • NEWBIE
  • 0 Points
  • Member since 2020

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 1
    Replies
I have created a lightning app with a text box and list of contacts under it.As user types in the search string,List contents should be filtered.But I am receiving following error upon typing the search string-rerender threw an error in 'markup://aura:iteration' : Cannot read property 'childNodes' of null.I came across-"http://salesforce.stackexchange.com/questions/71604/lightning-bug-in-lightning-framework-when-using-aurarenderif" but not sure if it is the same reason for this behavior.Could anyone point out the error in my below code.

Component to display list of filtered contacts-ContactItemList.cmp
<aura:component controller="ContactItemListController" >
    <ltng:require styles="/resource/EquinixBootstrap/equinixbootstrap.css" scripts="/resource/Bootstrapjs/bootstrap.min.js" />    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />   
    <aura:handler event="c:PFAppEvent" action="{!c.doInit}"/>	
    <aura:attribute name="contacts" type="Contact[]"/>    
    
	<aura:iteration items="{!v.contacts}" var="p">
        <c:ContactItem fullName="{!p.Name}" accountName="{!p.Account.Name}" />        
    </aura:iteration> 
</aura:component>
Component to type in the search string-SearchComponent.cmp
<aura:component >
    <ltng:require styles="/resource/EquinixBootstrap/equinixbootstrap.css" scripts="/resource/Bootstrapjs/bootstrap.min.js,/resource/jQuery/jquery-1.11.3.min.js" afterScriptsLoaded="{!c.loadJQuery}"/>    
    <aura:registerEvent name="PFAppEvent" type="c:PFAppEvent"/>
    
    <input type="text" style="width:100%;" class="form-control" placeholder="Name or Username" id="searchBox" />
</aura:component>
Helper method to call Server Side controller and fetch matching contacts-ContactItemListHelper.js
({
 	getContacts: function(component,event) {
      
        var action = component.get("c.getContacts");
        var searchString;
        if(typeof event != 'undefined'){
   			searchString=event.getParam("searchString");
        }else{
            searchString='';
        }
        console.log('Contact List Item:'+searchString);
        action.setParams({
			"searchString": searchString
		});
        action.setCallback(this, function(a) {
            component.set("v.contacts", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }    
})
Listener to Search Component-SearchComponentController.js
({
	loadJQuery: function(component, event, helper) {
        console.log('I am loaded');
        var lastValue = '';
		setInterval(function() {
    		if ($("#searchBox").val() != lastValue) {
	        	lastValue = $("#searchBox").val();
                console.log('New Value:'+lastValue);
		        var appEvent = $A.get("e.c:PFAppEvent");
		        appEvent.setParams({ "searchString" : lastValue });
		        appEvent.fire();                
	    	}
		}, 1500);        
	}

})