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);        
} })
up vote 15 down vote accepted

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.

  • Thanks @kris for the timely reply.It fixed the issue.But contact list is refreshing with a delay.Event is caught in the listener(SearchComponentController.js) within no time.I can see result of below line as soon as I type in the text box. console.log('New Value:'+lastValue); But there is a delay when the list refreshes in the UI.Is it because Salesforce batches up the requests and processes asynchrnously?Is the delay expected?Please advise – Suneel May 28 '15 at 16:38
  • Yes we do batch. Quite a bit of the framework is asynchronous, is this causing you problems? – Kris Gray May 28 '15 at 20:55
  • Thanks... wrapping in a <span> worked for me (after wasting about 3 hours of my life on other investigations)... Lets hope a simple span can not break in future as stated by @Rajendra – dacology Mar 14 '17 at 11:49
  • Actually... No this did not work. This issue is very intermittent. It feels to me that there is a compilation factor at play perhaps? As this can go away for a while, and often comes back after an unrelated edit/save. Is this possible? – dacology Mar 14 '17 at 11:59
  • So we also have an issue called a wandering marker. It's complicated to describe, but it shows up a lot with iteration and it also is very intermittent. – Kris Gray Mar 17 '17 at 19:23

After spring 17 release <SPAN> solution will not work.

You will receive the following error in Spring 17 Release:

This page has an error. You might just need to refresh it. render threw an error in 'markup://aura:html' [The HTML tag 'SPAN' is not allowed.] Failing descriptor: {markup://aura:html}

Workaround : Use <Div> tag instead of <SPAN> tag as in the following example:

<aura:renderIf isTrue="{!v.testingArray.length > 0}">
    <DIV>
    <aura:iteration items="{!v.testingArray}" var="opp">
        {!opp.name} <br/>
    </aura:iteration>
    </DIV>
    <aura:set attribute="else">
        Array empty
    </aura:set>
</aura:renderIf>
  • 1
    You weren't able to use a span? That seems like a bug. Spans should be fine. Might be a case sensitivity issue too. – Kris Gray Mar 31 '17 at 0:12

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.