0

I'm trying to append an iframe to a nested div, but for some reason, the append doesn't work when it's an iframe.

var cmpStyle = "width: " + theWidth + "; height: " + theHeight;
$("#createInMe").append("<div id=\'vid-" + cmpID + "\' 
class=\'videoWrapper\'></div>");
$("#vid-" + cmpID).append("<div id=\'iframe-" + cmpID + "\' 
class=\'videoWrapperIframe\' style=\'" + cmpStyle + "\'></div>");
$("#iframe-" + cmpID).append("<iframe id=\'myId\' width=\'560\' height=\'315\' src=\'https://www.youtube.com/embed/IBvf7KUEZ78\' allowfullscreen=\'true\'></iframe>");

The first two divs are created as hoped for, but the iframe does not get created.

I changed it to one string and get the same result in the inspect element window.

<div id="createInMe" data-aura-rendered-by="825:0" class="cSaleFunnel" data-aura-class="cSaleFunnel">
    <div class="videoWrapper" id="vid-a1p2a0000005NKEAA2">
        <div style="width: 100%; height: undefined%" class="videoWrapperIframe" id="iframe-a1p2a0000005NKEAA2"></div>
    </div>
</div>

UPDATE: I believe this has something to do with Salesforce preventing specific types of things from being injectable into the DOM. The reason that I say that is because of the following code.

var bgImage = theResult[i].Image_URL__c;
var cmpStyle = "display: block; width: " + theWidth + "; height: " + theHeight + "; background-image: url(\'" + bgImage + "\')";
$("#createInMe").append("<div id=\'img-" + cmpID + "\' style=\'" + cmpStyle + " \'></div>");


$A.createComponent(
    "aura:HTML", {
        "tag": "div",
        "HTMLAttributes": {
            "id": cmpID,
            "style": cmpStyle
        }
    },
    function(components, status, errorMessage) {
        if (status === "SUCCESS") {
            var body = component.get("v.body");
            body.push(components);
            component.set("v.body", body);
        }
    }
);

Now, the createComponent function creates the banner image as hoped for, but the jquery append creates a div with the following style:

display: block;
width: 100%;
height: 250px;
background-image: url(;

It will not add the URL portion, and I tried writing the code in various ways. Does this mean that the only way to create my nested divs is through createComponent? And if so, how do I create my nested div with the iframe two divs deep?

5
  • What happens if you use append just once, with all the HTML in one big string?
    – sfdcfox
    Commented Apr 28, 2018 at 16:57
  • @sfdcfox I changed it to a single line and get the same results. I edited my question to show the output.
    – Logan
    Commented Apr 30, 2018 at 13:01
  • @sfdcfox I updated my question again, as it appears that Salesforce is preventing specific types of appending. I'd love your thoughts on this!
    – Logan
    Commented Apr 30, 2018 at 13:38
  • Okay, I changed the bundle version to 39, and the iframe will append, but the image url still doesn't work...
    – Logan
    Commented Apr 30, 2018 at 14:51
  • Okay, it looks like you've got a quoting issue. One sec.
    – sfdcfox
    Commented Apr 30, 2018 at 14:53

1 Answer 1

1

The apostrophes in the CSS are being misinterpreted. This is a case of not sufficiently escaping quotes; what is happening here is the string is being prematurely terminated, which causes the element to parse incorrectly.

For this reason, I'd recommend using $A.createComponents, which eliminates the possibility that you'll screw up something trivial like this. However, to actually fix this problem, use a template string instead:

var cmpStyle = `display: block; width: ${theWidth}; height: ${theHeight}; background-image: url('${bgImage}')`;
$("#createInMe").append(`<div id="img-${cmpID}" style="${cmpStyle}" />`);

Example code using $A.createComponents:

<aura:application >
    <div aura:id="container">

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

({
    init: function(component, event, helper) {
        var cmpID = component.getGlobalId(), cmpStyle = "";
        $A.createComponents(
            [
                ["div",{ id: "vid-"+cmpID, class:"videoWrapper" }],
                ["div",{ id: "iframe-"+cmpID, class: "videoWrapperIFrame", style: cmpStyle }],
                ["iframe",{ id:"myId", width:"560", height:"315", allowfullscreen:"true",
                           src:"https://www.youtube.com/embed/IBvf7KUEZ78" }
                ]
            ],
            (components, status, error) => {
                switch(status) {
                case "DRAFT":
                case "SUCCESS":
                components[0].set("v.body", components[1]);
                components[1].set("v.body", components[2]);
                component.find("container").set("v.body", components[0]);
                break;
                case "ERROR":
                alert(error[0].message);
            }
            });
    }
})
6
  • The problem with the createComponents is that I am looping through a related list of records to determine what needs to be created (video, image, text), and I don't see how to use the createComponents with an iframe. I can't mix and match because I need them to output in a specific order...
    – Logan
    Commented Apr 30, 2018 at 15:02
  • I copied and pasted your cmpStyle string and get the same css results as I did with my string...
    – Logan
    Commented Apr 30, 2018 at 15:05
  • Do you have any references for nesting the iframe 2 divs deep?
    – Logan
    Commented Apr 30, 2018 at 15:07
  • @Logan I added the code I wrote up testing iframes in $A.createComponents to this answer, too.
    – sfdcfox
    Commented Apr 30, 2018 at 15:09
  • You're the best! Really appreciate it!
    – Logan
    Commented Apr 30, 2018 at 15:10

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .