function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Suneel#8Suneel#8 

Lightning Component aura:iteration is throwing error upon rerendering

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);        
	}

})

 
Best Answer chosen by Suneel#8
Suneel#8Suneel#8
Rishav,

Thanks for staying with me.I got the answer on StackExchange-http://salesforce.stackexchange.com/questions/77730/lightning-component-auraiteration-is-throwing-error-upon-rerendering
We should wrap the component with <span></span> to fix it.It is framework issue

All Answers

RishavRishav
Hii Suneel,
Where is your apex controller class?
please post your apex controller so that i can debug. 

Thanks
Rishav
 
Suneel#8Suneel#8
Thanks Rishav for the reply.Below is my apex controoller-ContactItemListController.apxc.Please help 
public class ContactItemListController {
	@AuraEnabled
    public static List<Contact> getContacts(String searchString) {
        List<Contact> cList;
        System.debug('Filtered String:'+searchString);
        if(searchString!=null){
        	String wildcardString='%'+searchString+'%';
        	cList=[select Name,Account.Name from Contact where name like :wildcardString];
        }else
            cList=[select Name,Account.Name from Contact limit 5];
        return cList;
    }    
}

 
Suneel#8Suneel#8
Rishav,

Thanks for staying with me.I got the answer on StackExchange-http://salesforce.stackexchange.com/questions/77730/lightning-component-auraiteration-is-throwing-error-upon-rerendering
We should wrap the component with <span></span> to fix it.It is framework issue
This was selected as the best answer
Mars Rover 1622Mars Rover 1622
Hi Sunil,

During my developement, I was also facing the same problem, So I tried many solution with no luck.
But I found one solution to these type of problems:

You have created a custom component "c:ContactItem" and passng the values to it using two way binding i.e. "{!}" if you are just displaying the values of the contact, you can just change the expression from two way binding to oneway i.e. emit the values using "{#}":

Changes need to be done in your component.cmp file are as below: 
<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>
What I have done is I changes the attribute assignment from  
fullName="{!p.Name}" accountName="{!p.Account.Name}"
To 
fullName="{#p.Name}" accountName="{#p.Account.Name}"

Let me know if it helped.
 

Thanks.
Milanjeet Singh