1

I am creating some dynamic components inside a lightning component. They are created on the click of a button. The code seems to executes or render differently when the button is clicked first compared to subsequent clicks. The subsequent clicks render the component correctly. Using console.log - it looks like the code is executing differently on each click even though the exact same code is running (I have even take out the apex to strip the code down to hard coded lists to find where the issue is)

Lightning Component Helper

createDynamicComps : function(component, event) {
    component.set('v.body', []);
    var LevelOne = ['BMW','Audi','Jeep'];
    var LevelTwo = ['Black','Green','Red','Blue','Purple'];

    for (var leveloneIterator = 0; leveloneIterator < LevelOne.length; leveloneIterator++){
         $A.createComponent("ui:message", {
            "Title": 'test',
            "severity" : "message"
         },
         function(newCmp, status, errorMessage){
             var body = component.get("v.body");
             body.push(newCmp);                                                  
             component.set("v.body", body);
             console.log('UI Message');
         }
      );

    for (var leveltwoIterator = 0; leveltwoIterator < LevelTwo.length; leveltwoIterator++){
        $A.createComponent("ui:inputRadio", {
            "aura:id": LevelTwo[leveltwoIterator].replace(" ","")+leveltwoIterator,
            "name": LevelTwo[leveltwoIterator].replace(" ",""),
            "label": LevelOne[leveloneIterator] + " Color: " + LevelTwo[leveltwoIterator]
        },
        function(newCmp, status, errorMessage){
            var body = component.get("v.body");
            body.push(newCmp);                                                    
            component.set("v.body", body);
            console.log('UI Radio');
        }
    );
}, ...

This is called by the controller.The controller code is called when a button is clicked

doButtonStuff : function(component, event, helper) {

    helper.createDynamicComps(component, event);


},

When the button is clicked the first time - The four UI Messages display and then 15 radio buttons. When the button is clicked subsequent times - a message is displayed and then five radio buttons below it for each message. This execution is also shown in the console screen shot below enter image description here

1 Answer 1

0

I was able to resolve the issue by doing the same thing as in answer linked below. I created an array of components, add the components to the array in the loop and then created/pushed the components outside of the loop.

Dynamically Building Nested HTML in Lightning Component

populateRow : function(component) {
var record = component.get("v.record");
console.log('record = ' + JSON.stringify(record));
var fields = component.get("v.fields");

for (var idx in fields) {
    var field = fields[idx];
    var value = '';
    if(field.includes('.')) {
        value = record[field.substring(0, field.indexOf('.'))].Name
    } else {
        value = record[field];
    }
    $A.createComponents([
            ["aura:HTML", {
                "tag": "td",
                "HTMLAttributes": {
                    "id": "tdId"
                }
            }],
            ["aura:HTML", {
                "tag": "div",
                "body": value,
                "HTMLAttributes": {
                    "id": "dynamicDiv",
                    "title": value,
                    "class": "slds-truncate"
                }
            }]
        ],
        function(components, status, errorMessage){
            if (status === "SUCCESS") {
                var td = components[0];
                var div = components[1];
                td.set("v.body", div);

                var container = cmp.find("container");
                if (container.isValid()) {
                    var body = container.get("v.body");
                    body.push(td);
                    container.set("v.body", body);
                }
            }
            else if (status === "INCOMPLETE") {
                console.log("No response from server or client is offline.")
                // Show offline error
            }
            else if (status === "ERROR") {
                console.log("Error: " + JSON.stringify(errorMessage));
                // Show error message
            }
        }
    );
}

}

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.