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-“Lightning: Bug in Lightning framework when using aura:renderIf?” 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>
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" />
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); } })
Answer
It’s possible it’s the same bug. Try wrapping your component with a span, see if it goes away.
<aura:iteration items="{!v.contacts}" var="p">
<span>
<c:ContactItem fullName="{!p.Name}" accountName="{!p.Account.Name}" />
</span>
</aura:iteration>
Obviously if this fixes it, it’s not your issue it is the frameworks issue and should be solved here soon.
Attribution
Source : Link , Question Author : Suneel , Answer Author : Kris Gray