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
Leo WangLeo Wang 

Uncaught TypeError: Cannot read property 'childNodes' of null when using aura:if and aura:renderIF?

<aura:iteration items="{!v.opts}" var="item">
    <div class="mo-picklist-option">
        <div class="mo-picklist-content">
            <aura:if isTrue="{!v.currentType == 'Maturity'}">
            	<ui:inputRadio name="others" label="{!item}"/>
            </aura:if>
            <aura:if isTrue="{!v.currentType == 'Strategy'}">
                <ui:inputCheckbox label="{!item}"/>
            </aura:if>
        </div>
    </div>
</aura:iteration>
<!--third-->
<aura:if isTrue="{!v.currentType == 'Strategy'}">
    <div class="mo-picklist-option">
        <div class="mo-picklist-content">
            <span>Other</span>
            <input type="text"/>
        </div>
    </div>
</aura:if>
error occurs when the third aura:if is added. is something wrong? Any answer is appreciated.
RishavRishav
Hii Leo,
There is no any error in your current code that u  have posted here.
I have tested your this full code and it's working fine.
Please see your another area of code or if possible then please post the full code that will help in better understanding.

Thanks
Rishav
Leo WangLeo Wang
Hi Rishav,
thanks for your answer.
Other area of code works fine. The situation is that first part and second part cann't exist simultaneously, or error occurs. But either of both works fine solely. Now I wonder that there is a limit on aura:if or aura:renderIF. I'm not sure. 
<!--first part begin-->
<aura:iteration items="{!v.opts}" var="item">
    <div class="mo-picklist-option">
        <div class="mo-picklist-content">
            <aura:if isTrue="{!v.currentType == 'Maturity'}">
            	<ui:inputRadio name="others" label="{!item}"/>
            </aura:if>
            <aura:if isTrue="{!v.currentType == 'Strategy'}">
                <ui:inputCheckbox label="{!item}"/>
            </aura:if>
        </div>
    </div>
</aura:iteration>
<!--first part end-->
<!--second part begin-->
<aura:if isTrue="{!v.currentType == 'Strategy'}">
    <div class="mo-picklist-option">
        <div class="mo-picklist-content">
            <span>Other</span>
            <input type="text"/>
        </div>
    </div>
</aura:if>
<!--second part end-->
A F 3A F 3
I get this exact same error, with a very similar situation as well. I'm glad to see I'm not the only one that gets this, since it doesn't happen on all renderIf statements. Here's the full details, copied over from http://salesforce.stackexchange.com/questions/71604/lightning-bug-in-lightning-framework-when-using-aurarenderif
  
I have a Nav component which contains the following:

<aura:renderIf isTrue="{!v.showAllProducts}">
    <c:showAllProductsCmp/>

    <aura:set attribute="else">
        <c:showSelectedProductsCmp/>
    <aura:set>
<aura:renderIf>
On a button press, showAllProducts changes from false -> true, and true -> false.

What this does is allow a user to see all products and select them (this is done in the showAllProductsCmp component. The component simply uses <aura:iteration> to render all product objects.)

and then switch to see only the selected products with the option to unselect them (in the showSelectedProductsCmp component).

I can add and remove any/all products, and my code works as intended -- as long as there is at least one product remaining. For example, I can add 4 products, remove 3, and it works perfectly.

As soon as I remove the last product in the showSelectedProductsCmp and then try to switch back over to the showAllProductsCmp, the app crashes and I get a javascript error:

Uncaught TypeError: Cannot read property 'childNodes' of null
aura_proddebug.js:8364
This line is part of the Lightning framework. Specifically it is:

nextSibling = target.childNodes[calculatedPosition];
So the target variable is null and it crashes.

If I remove renderIf and set attribute="else" components and ALWAYS render my two custom components, everything works as it should and there are no errors -- even if I remove all products.

So I don't believe that there is anything wrong with my code, though I would be happy to be corrected :)

PS: This doesn't happen on all renderIf statements: I have quite a few of them in my code and all of them work except for this one. Which means that this is hard to reproduce, sadly.

 
A F 3A F 3
You can reproduce this error if you copy the following code:

Lightning Application: 
<aura:application >
	<aura:attribute name="testing1" type="Boolean" default="false"/>
    <aura:attribute name="testing2" type="Boolean" default="true"/>
    <aura:attribute name="testing3" type="Boolean" default="false"/>
    <aura:attribute name="testing4" type="Boolean" default="true"/>
    <aura:attribute name="testing5" type="Boolean" default="false"/>
    <aura:attribute name="testing6" type="Boolean" default="true"/>
    <aura:attribute name="testingArray" type="SObject[]" default="[{name:'bob'},{name:'jack'},{name:'jill'}]"/>
    <button onclick="{!c.changeTesting}">Change</button>
    
    <aura:renderIf isTrue="{!v.testing1}">
        <aura:iteration items="{!v.testingArray}" var="item">
            <aura:renderIf isTrue="{!v.testing1}">
            	Bob!
            </aura:renderIf>
        </aura:iteration>
        <aura:set attribute="else">
        	Not showing names.
        </aura:set>
    </aura:renderIf>
    
    <aura:renderIf isTrue="{!v.testing2}">
        <aura:iteration items="{!v.testingArray}" var="item">
            <aura:renderIf isTrue="{!v.testing2}">
            	Bob!
            </aura:renderIf>
        </aura:iteration>
        <aura:set attribute="else">
        	Not showing names.
        </aura:set>
    </aura:renderIf>
    
    <aura:renderIf isTrue="{!v.testing3}">
        <aura:iteration items="{!v.testingArray}" var="item">
            <aura:renderIf isTrue="{!v.testing3}">
            	Bob!
            </aura:renderIf>
        </aura:iteration>
        <aura:set attribute="else">
        	Not showing names.
        </aura:set>
    </aura:renderIf>
    
    <aura:renderIf isTrue="{!v.testing4}">
        <aura:iteration items="{!v.testingArray}" var="item">
            <aura:renderIf isTrue="{!v.testing4}">
            	Bob!
            </aura:renderIf>
        </aura:iteration>
        <aura:set attribute="else">
        	Not showing names.
        </aura:set>
    </aura:renderIf>
    
    <aura:renderIf isTrue="{!v.testing5}">
        <aura:iteration items="{!v.testingArray}" var="item">
            <aura:renderIf isTrue="{!v.testing5}">
            	Bob!
            </aura:renderIf>
        </aura:iteration>
        <aura:set attribute="else">
        	Not showing names.
        </aura:set>
    </aura:renderIf>
    
    <aura:renderIf isTrue="{!v.testing6}">
        <aura:iteration items="{!v.testingArray}" var="item">
            <aura:renderIf isTrue="{!v.testing6}">
            	Bob!
            </aura:renderIf>
        </aura:iteration>
        <aura:set attribute="else">
        	Not showing names.
        </aura:set>
    </aura:renderIf>
</aura:application>

Application controller: 
changeTesting:function(component,event,helper){
        var testing = component.get("v.testing1");
        component.set("v.testing1", !testing);
        component.set("v.testing3", !testing);
        component.set("v.testing5", !testing);
        
        component.set("v.testing2", testing);
        component.set("v.testing4", testing);
        component.set("v.testing6", testing);
    }

Press the change button 4 times and you get the error.
RishavRishav
Hi Leo,
  I am again telling there is nothing error in your code.
  there is no any limitation  on aura:if or aura:renderIF like you both are telling. 
 I have again compiled your code only and got the correct answer: To prove that i am attaching u code and sanpshot of output: 
<aura:component controller="OpportunityController">
    <aura:attribute name="currentType" type="string" default="Strategy"/>
    <aura:attribute name="opportunities" type="Opportunity[]"/>
    <ui:button label="Get Opportunities" press="{!c.getOpps}"/>
   
	<!--first part begin-->
    <p style="color:blue"><b> This is my first part</b></p>
<aura:iteration var="opportunity" items="{!v.opportunities}">
    <div class="mo-picklist-option">
        <div class="mo-picklist-content">
            <aura:if isTrue="{!v.currentType == 'Maturity'}">
            <p>	<ui:inputRadio name="others" label="{!opportunity.Name}"/> </p>
            </aura:if>
            <aura:if isTrue="{!v.currentType == 'Strategy'}">
            <p> <ui:inputCheckbox label="{!opportunity.Name}"/> </p>
            </aura:if>
        </div>
    </div>
    </aura:iteration>   <br/> <br/>
<!--first part end-->
<!--second part begin-->
      <p style="color:red"><b> This is my second part </b></p>
<aura:if isTrue="{!v.currentType == 'Strategy'}">
    <div class="mo-picklist-option">
        <div class="mo-picklist-content">
            <span>Other</span>
            <input type="text"/>
        </div>
    </div>
</aura:if>
<!--second part end-->
</aura:component>

Here is the JS file  
({
    getOpps: function(cmp){
        var action = cmp.get("c.getOpportunities");
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set("v.opportunities", response.getReturnValue());
            }
        });
	 $A.enqueueAction(action);
    }
})

Here is the apex controller file  
public class OpportunityController {
     @AuraEnabled
    public static List<Opportunity> getOpportunities() {
        List<Opportunity> opportunities = 
                [SELECT Id, Name, CloseDate FROM Opportunity LIMIT 5];
        return opportunities;
    }
}

User-added image

Now i think You both need to find the error in other section of your code.
If your problem solved then please close this thread , and if u got ur actual issue then open a new thread. 

Thanks
Rishav
RishavRishav
Hii AF3, 
     There is nothing error like you are explaining ,
     Your <aura:iteration> component is unable to read "testingArray" Attribute.  So error is there
     I just did a little modification in ur code and it's working fine. Here is my code : 
<aura:application >
	<aura:attribute name="testing1" type="Boolean" default="false"/>
    <aura:attribute name="testing2" type="Boolean" default="true"/>
    
    <aura:attribute name="testingArray" type="SObject[]" default="[{name:'bob'},{name:'jack'},{name:'jill'}]"/>
    <button onclick="{!c.changeTesting}">Change</button>
    
    <aura:renderIf isTrue="{!v.testing1}">
        <aura:iteration items="1,2,3,4" var="item">
            <aura:renderIf isTrue="{!v.testing1}">
            	Bob!
            </aura:renderIf>
        </aura:iteration>
        <aura:set attribute="else">
        	Not showing names.
        </aura:set>
    </aura:renderIf>
    
    <aura:renderIf isTrue="{!v.testing2}">
        <aura:iteration items="1,2,3,4,5,6" var="item">
            <aura:renderIf isTrue="{!v.testing2}">
            	jack
            </aura:renderIf>
        </aura:iteration>
        <aura:set attribute="else">
        	Not showing names.
        </aura:set>
    </aura:renderIf>
    
 
</aura:application>
  
({
      changeTesting:function(component,event,helper){
           
            var testing = component.get("v.testing1");
             //alert('test1 value'+testing);
            component.set("v.testing1", !testing);
                
               var test1 = component.get("v.testing1")
               // debugger;
               alert('test1 value' + test1);
                 
             var testing2 = component.get("v.testing2");
               component.set("v.testing2",!testing2);
        
        }
    
})
nishad basha 7nishad basha 7
Hi ,Rishav
        
         my requirement is   select any object and click query button and  display  records and with Dynamic SOQL query .How to solve this one please can you help me.
A F 3A F 3
Rishav:

You are correct, that example does have a flaw in it. Here, try this one instead. It appears that renderIf failes if you are using the length of the array in the isTrue attribute -- but not on the first render, only on subsequent rendering.

Copy the following code, then run the application. Click the "fill array" button, then the "empty array" button, then the "fill array" button again. Receive the error. 

Aura application 
<aura:application >
    <aura:attribute name="isEmptyArray" type="Boolean" default="false"/>
    <aura:attribute name="testingArray" type="Opportunity[]"/>
    
    <button onclick="{!c.fillArray}">Fill array</button>
    <button onclick="{!c.emptyArray}">Empty Array</button>
    
    <div>
        <aura:renderIf isTrue="{!v.testingArray.length > 0}">
            <aura:iteration items="{!v.testingArray}" var="opp">
                {!opp.name} <br/>
            </aura:iteration>
            <aura:set attribute="else">
                Array empty
            </aura:set>
        </aura:renderIf>
    </div>
</aura:application>

Controller 
({
    fillArray:function(component,event,helper) {
        var tempArray = [{'sobjectType': 'Opportunity', 'name':'One'},{'sobjectType': 'Opportunity', 'name':'Two'}];
        component.set("v.testingArray", tempArray);
    },
    emptyArray:function(component,event,helper) {
        var emptyArray = [];
        component.set("v.testingArray", emptyArray);
    }
})

This one should be a lot simpler to test.
A F 3A F 3
Correction: I used the above code with a boolean instead of the length of the array and it still broke.
nishad basha 7nishad basha 7

Hi, Leo Wang

          i  can enter  user duplicate values click on submit button. display the error meassage using try and catch exceptions. how to solve the above scenario can you  plz help me. i need user values with example
nishad basha 7nishad basha 7

Hi, Rishav

 i  can enter  user duplicate values click on submit button. display the error meassage using try and catch exceptions. how to solve the above scenario can you  plz help me. i need user values with example
 
Leo WangLeo Wang
Hi, nishad basha
submit duplicated values? To fix it, 1. insert record in server-controller(apex) 2. return the record(with id) 3. set the appropriate component attribute with the the returned record.
Leo WangLeo Wang
Sorry, nishad basha. 'insert' should be 'upsert'
nishad basha 7nishad basha 7

Hi, Leo Wang
       can you give me the example of user duplicate values click on submit button display the error meassage
 
A F 3A F 3
Confirmed as a bug, and a workaround offered over on the salesforce.stackexchange.com link in my first post.