1

I tried to create a HTML Div element dynamically with $A.createComponents(); It's working fine in chrome, safari, firefox, but in IE, it throws an error

This page has an error. You might just need to refresh it. Uncaught error in $A.run() [Expected ':']

Why is it not working in IE ,Is there any workaround to make it work?

GenerateHtmlTagContainer.app

<aura:application extends="force:slds">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <div aura:id="createCmp">

    </div>
</aura:application>

GenerateHtmlTagContainerController.js

({
    doInit : function(cmp, event, helper) {
        var answer = ['A', 'B', 'C'];
        var uiCmps = [];

        var HTMLAttributes = {
            "class": "slds-p-vertical_xx-small"
        };

        for (var i = 0; i < answer.length; i++) {
            var tag = {
                "tag": "div",
                "body": answer[i],
                HTMLAttributes
            };

            var uiCmp = [
                "aura:html",
                tag
            ];
            uiCmps.push(uiCmp);
        }

            $A.createComponents(uiCmps,
                function(newCmp, status, errorMessage){
                    if(status === "SUCCESS"){
                        var createCmp = cmp.find("createCmp");
                        createCmp.set("v.body", newCmp);
                    }
            });

    }
})
1

Actual issue in the code is, you are not correctly passing the data to the "HTMLAttributes" attribute of the aura:html component definition.

HTMLAttributes (Map) => A map of attributes to set on the html element.

 var tag = {
        "tag": "div",
        "body": answer[i],
        HTMLAttributes // you missed the property 'HTMLAttributes' just passed the value only.
 };

Correct code:

 var HTMLAttributes = {
     "class": "slds-p-vertical_xx-small"
 };

 var tag = {
    "tag": "div",
    "body": answer[i],
    "HTMLAttributes" : HTMLAttributes // pass the key 'HTMLAttributes' followed by value.
 };
2

The issue here has nothing to do with Lightning. The code uses a feature of JavaScript called "object literal shorthand property" which is not supported on IE11, but valid on modern browsers: var tag = { "tag": "div", "body": answer[i], HTMLAttributes };

It's part of a group of object literal extensions also not supported in IE11: http://kangax.github.io/compat-table/es6/#test-object_literal_extensions

Here are a few articles on the subject:

http://www.benmvp.com/learning-es6-enhanced-object-literals/

https://ariya.io/2013/02/es6-and-object-literal-property-value-shorthand

Lightning doesn't transpile your code, so what you write is what you run.

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.