1

I am facing an issue with the Dynamically binded lightning icon not showing at the required place. I have a simple code attached here. The issue is that if I add the lightning icon through the page level, the icon is showing properly as required, however if I add the lightning icon dynamically through the span using jquery it's not showing up. I have attached screenshot as well as the code. Winter 17 - Salesforce

DemoTestApp.app

<aura:application extends="force:slds">
<c:DemoTest />
</aura:application>

DemoTest.cmp

<aura:component >
<ltng:require scripts="{!join(',',
                       $Resource.jQuery + '/jquery/lightning/js/jquery-2.2.4.min.js',
                       $Resource.jQuery + '/jquery/lightning/js/jquery-migrate-1.3.0.min.js')}" 
              afterScriptsLoaded='{!c.doResult}'/>
Component level Info Icon : <span id="infoIcon1"><lightning:icon iconName="utility:info" size="small" /></span>
<br/>
ControllerJs level Info Icon : <span id="infoIcon2"></span>
</aura:component>

DemoTestController.js

({
doResult : function(component, event, helper) {
    $('#infoIcon2').html('<lightning:icon iconName="utility:info" size="small" />');
}
})

Sample output: enter image description here

5

Try this : using $A.createComponent()

DemoTestApp.app :

<aura:application extends="force:slds">
<c:DemoTest />
</aura:application>

DemoTest.cmp :

<aura:component >
<ltng:require scripts="{!join(',',
                       $Resource.jQuery + '/jquery/lightning/js/jquery-2.2.4.min.js',
                       $Resource.jQuery + '/jquery/lightning/js/jquery-migrate-1.3.0.min.js')}" 
              afterScriptsLoaded='{!c.doResult}'/>
Component level Info Icon : <span id="infoIcon1"><lightning:icon iconName="utility:info" size="small" /></span>
<br/>
ControllerJs level Info Icon : <span> {!v.body} </span>
</aura:component>

DemoTestController.js :

({
    doResult: function(component, event, helper) {

        $A.createComponent(
            "lightning:icon",
            {
                "iconName": "utility:info",
                "size": "small"
            },
            function(newIcon, status, errorMessage){

                if (status === "SUCCESS") {
                    var body = component.get("v.body");
                    body.push(newIcon);
                    component.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: " + errorMessage);
                        // Show error message
                    }
            }
        );
    },
})
0

The problem is that you can't add components to the markup with jquery. You need to use $A.createComponent() to dynamically create the component and then add it to the page.

The docs for that are here.

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.