0

When I try to create dynamic lightning button it is not displaying in google chrome.But it is displaying firefox.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
     <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
     <div aura:id="buttonrender"></div> 
</aura:component>

({
doInit : function(component, event, helper) {
        $A.createComponent(
            "lightning:button",
            {
                "aura:id": "findableAuraId",
                "label": "Press Me",
                "onclick": component.getReference("c.handlePress")
            },
            function(newButton){
                    var body = component.find("buttonrender").get("v.body");
                    body.push(newButton);
                    component.set("v.body", body);
            }
        );
    },
    handlePress : function(component, event, helper) {
    }
})
2

I don't think your code works on Chrome.

In fact, there's an error at this line: component.set("v.body", body);

You don't have an attribute called body in your component.

You have two ways to add the button dynamically.

  1. The first one would be to add buttons attribute to your component. Then, you only have to get the current value of this attribute, push the new button and finally replace the old value with the new one. Using the below code:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
     <aura:attribute name="buttons" type="Aura.Component[]" />
     <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
     {!v.buttons}
</aura:component>

doInit : function(component, event, helper) {
        $A.createComponent(
            "lightning:button",
            {
                "aura:id": "findableAuraId",
                "label": "Press Me",
                "onclick": component.getReference("c.handlePress")
            },
            function(newButton){
                var body = component.get("v.buttons");
                body.push(newButton);
                component.set("v.buttons", body);
            }
        );
    },
  1. The second one would be to use your current code. But you should replace the use of the body attribute by selecting your div first, then updating its body. Using the below code:

    component.find("buttonrender").set("v.body", body);

  • 2
    In my opinion it is not recommended to define an attribute named body by yourself as it will be conflicting with the one available in every aura:component by default – Christian Menzinger Apr 18 '18 at 7:56
  • @ChristianMenzinger You're totally right. Looks like I answered without thinking hard enough... Thank you for your warning. I updated the answer. – Martin Lezer Apr 18 '18 at 7:59

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.