4

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');
                 }
            }
        );
},
  • Define "not working" what is happening, what do you expect to happen? – Eric Sep 20 '17 at 6:49
  • @Eric Code I have written to create nested dynamic html not rendering me the expected output. – Jill_sfdc Sep 20 '17 at 7:03
0

You have bug at "lightning:select" that you have creating Dynamically provide a required attribute label and name .

EXample:

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(["lightning:select",{
            "label" :"Select an item",
            "name" : "selectItem"
        }]);
        newComponents.push(["aura:html", {
            "tag": "option",
            "value":"1",
            "body": "",
            "HTMLAttributes": {
                "class": "slds-frame slds-size--3-of-12 slds-p-right_large",
            }

        }]);


        $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];
                                    var lightningselect = components[3];
                                    var option = components[4]; 
                                    lightningselect.set("v.body",option);
                                    div2.set("v.body",div3);
                                    div1.set("v.body",div2);
                                    pageBody.push(div1);
                                    pageBody.push(lightningselect);
                                    parentBody.set("v.body", pageBody);
                                }else 
                                {
                                    console.log('error');
                                }
                            }
                           );
    },
| improve this answer | |

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.