I am trying to implement nested dynamic creation of html components in lightning but it is not working.
I need to create multiple divs inside divs. I need to achieve something like this
<div>
<div></div>
<div></div>
</div>
Below is the code that is not working:
createDynamicallyDivs : function(component, event, helper) {
console.log('here');
var index=component.get("v.index");
var newComponents = [];
newComponents.push(["aura:html", {
"tag": "div",
"body": "",
"HTMLAttributes": {
"class": "slds-grid slds-p-bottom_small",
"aura:id":"div_row_"+index
}
}]);
newComponents.push(["aura:html", {
"tag": "div",
"body": "",
"HTMLAttributes": {
"class": "slds-frame slds-size--2-of-12 slds-p-right_x-small"
}
}]);
newComponents.push(["aura:html", {
"tag": "div",
"body": "Then by",
"HTMLAttributes": {
"class": "slds-float_right",
"title":"Then by"
}
}]);
newComponents.push(["aura:html", {
"tag": "div",
"body": "",
"HTMLAttributes": {
"class": "slds-frame slds-size--3-of-12 slds-p-right_large",
}
}]);
newComponents.push(["lightning:select",{
"title" : "",
}]);
$A.createComponents(newComponents,
function (components, status, errorMessage) {
if (status === "SUCCESS")
{
console.log(components.length);
var parentBody = component.find("newtag");
var pageBody = parentBody.get("v.body");
var div1 = components[0];
var div2 = components[1];
var div3 = components[2];
div2.set("v.body",div3);
div1.set("v.body",div2);
pageBody.push(div1);
parentBody.set("v.body", pageBody);
}else
{
console.log('error');
}
}
);
},
Best Answer
You have bug at
"lightning:select"
that you have creating Dynamically provide a required attributelabel and name
.EXample: