1

I am adding Lightning component dynamically to the body of a Div. It was working fine before Summer 16 release. I am not getting any error for same but component is not adding to div'body.

Component Code:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes">
 <aura:handler name="init" action="{!c.doInit}" value="{!this}" />
   <div id="QuestionsDiv" aura:id="QuestionsDiv" width="70%">                
 </div> 

Controller Code:

({
doInit : function(component, event, helper) {
      helper.doInit(component, event, helper);   
}
})

Helper Code:

({
doInit : function(component, event, helper) {
    var self = this;
    var divCmp = component.find("QuestionsDiv");
$A.createComponent("c:TextBoxComponent",
                {
                    "Id" : 'textid',
                    "inputText" : 'Enter Text',
                    "inputValue":'testvalue'
                }, 
                 function(newCmp){
                     var divBody = divCmp.get("v.body");
                     divBody.push(newCmp);
                     divCmp.set("v.body", divBody); 
                });   

 $A.createComponent("c:InputNumberComponent",
                {
                    "Id" : 'InputNumberid',
                    "inputText" : "Enter Number",
                    "inputValue":"testvalue"                        
                }, 
                 function(newCmp){                       
                   self.insertNewCmp(divCmp,newCmp);
                });
},
insertNewCmp:function(divCmp,newCmp){
    var divBody = divCmp.get("v.body");
    divBody.push(newCmp);
    divCmp.set("v.body", divBody);        
}
})

"c:TextBoxComponent" Component Markup:

<aura:component >  
<aura:attribute type="String" name="Id" />
<aura:attribute type="String" name="inputText" />
<aura:attribute type="String" name="inputValue" />       
<div class="slds-form-element">             
    <label class="slds-form-element__label" for="{!Id}">{!v.inputText}/label>
    <div class="slds-form-element__control">
      <ui:inputText aura:id="{!v.Id}" class="slds-input"  value="{!v.inputValue}"/>            
   </div>
</div>
</aura:component>

"InputNumberComponent" Component Markup:

<aura:component >
<aura:attribute type="String" name="Id" />
<aura:attribute type="String" name="inputText" />
 <aura:attribute type="String" name="inputValue" />
<aura:attribute type="double" name="waitage"/>

<div class="slds-form-element">
    <label class="slds-form-element__label">{!v.inputText}</label>
    <div class="slds-form-element__control">
     <ui:inputNumber aura:id="{!v.Id}" class="slds-input"  value="{!v.inputValue}" placeholder="{!v.inputText}"/>
   </div>
</div>
</aura:component>
15
  • can you post your component's markup code which creates c:TextBoxComponent?
    – Praveen
    Jun 14 '16 at 6:33
  • do you have {!v.body} line in your parent component?If so please post your Parent component's markup,controller,helper.js too.So that i can look in further.
    – Praveen
    Jun 14 '16 at 9:05
  • Praveen - I am not using {!v.body} tag but using a div i.e <div id="QuestionsDiv" aura:id="QuestionsDiv" width="70%">, In which I am trying to add component
    – shilpa
    Jun 14 '16 at 9:32
  • could just post more code ?.so that i can debug further
    – Praveen
    Jun 14 '16 at 9:35
  • also are you really sure,the insertNewCmp method is being called? try putting console.log to check
    – Praveen
    Jun 14 '16 at 10:16
0

Instead of $A.createComponent,why not use $A.createComponents which better serves the purpose, to create multiple components dynamically(in your case c:TextBoxComponent and c:InputNumberComponent) in a single call.

Once you get back newly created Components(which is an array) in the callback,just concat with the div's component.

you can refer the doc for more info on dynamically creating components.

your helper should look like this:

({
    doInit : function(component, event, helper) {
        var self = this;
        var divCmp = component.find("QuestionsDiv");
        $A.createComponents(
            [
                ["c:TextBoxComponent",
                    {
                        "Id" : 'testid',
                        "inputText" : 'testlabel',
                        "inputValue":'testvalue'
                    }
                ],
                ["c:InputNumberComponent",
                    {
                        "Id" : 'InputNumberid',
                        "inputText" : "Enter Number",
                        "inputValue":"testvalue"                        
                    }
                ]
            ], 
            function(newlyCreatedCmps, status){                         
               if (status === "SUCCESS") {
                    self.insertNewCmps(divCmp,newlyCreatedCmps);   
               }
               else{
                    console.log('error');
               }
            }
        );
    },
    insertNewCmps:function(divCmp,newCmps){
        var divBody = divCmp.get("v.body");
        divCmp.set("v.body", divBody.concat(newCmps));       
    }
});
3
  • Praveen - I am not adding component to body but in a div's body by using below code: divCmp.set("v.body", divBody);
    – shilpa
    Jun 14 '16 at 9:58
  • ok got it.will update the answer
    – Praveen
    Jun 14 '16 at 10:04
  • Praveen - I can not use $A.createComponents in my code, because I am adding component conditionally. But using "concat", in place of "Push" to add component in body, resolved my issue. Thank Praveen for helping me.
    – shilpa
    Jun 17 '16 at 8:22
0

This looks like an issue we just released the fix for in the .9 patch for Summer'16 (not all instances have it yet) specific to running components under LockerService and dynamic updates to v.body where updates to the body are not rendering. What instance is your org on?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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