11

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

2 Answers 2

16

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.

11
  • 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
    Commented May 28, 2015 at 16:38
  • Yes we do batch. Quite a bit of the framework is asynchronous, is this causing you problems?
    – Kris Gray
    Commented May 28, 2015 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
    Commented Mar 14, 2017 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
    Commented Mar 14, 2017 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
    Commented Mar 17, 2017 at 19:23
2

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
  • 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
    Commented Mar 31, 2017 at 0:12

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .