Browsers don't load these dynamically inserted images

Question

I'm using the Wolfram|Alpha API by using a proxy to fetch the XML file over AJAX, which is working excellently. I then use find() to look for some pod elements in that XML file. Those pods contain images which I want to embed in my page. So far, so good. I got the images out of the file and figured out how to append them to the container. That's where I hit a snag: the images do not appear. They are there when I inspect, but they do not load.

Here is my JavaScript code:

$.get(queryURL, function (data) {
    var wapods = $(data).find("pod");
    if (wapods.length !== 0) {
        $("#container").html('<div id="wabox"><a href="http://www.wolframalpha.com/input/?i=' + query + '" title="Wolfram|Alpha results for: ' + readQuery + '"><img id="walogo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Wolfram_Alpha_logo.svg/200px-Wolfram_Alpha_logo.svg.png" width="150" height="18" alt="Wolfram|Alpha"/></a></div>');
        $("#wabox").append($(wapods[0]).find("img")[0])
        .append($(wapods[1]).find("img")[0]);
    }
});

The image that is included when the element is created appears as expected. The other two images do not. When inspected in Firefox, the inspector says "Could not load the image". This occurs in Chrome as well. This is not due to addons; it occurs in a fresh profile as well.

My best guess is something to do with the transition from having the element in an XML file to inserting it into the HTML DOM, but I don't know.

Edit: if I right click and select "Edit as HTML" in the inspector, change one thing, and then exit the editor, the image appears. Still no clue why.

enter image description here

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

I think that you are ont he right track. An element can't just be moved from an XML document to an HTML document.

Try to get the html code for the elements (as shown here), and append that:

function getHTML(el) {
  return $('<div>').append(el.clone()).html();
}

$("#wabox").append(getHTML($(wapods[0]).find("img").first()))
  .append(getHTML($(wapods[1]).find("img").first()));

edited May 23 '17 at 12:05

Community

1
1

answered Sep 14 '14 at 23:15

Guffa

687,336
108
737
1,005

Thank you for this, it is exactly what I needed. Why did you use `.first()` instead of `[0]`? Also, exactly why *can't* you just move an element? – Ian Sep 14 '14 at 23:21
@Ian: I used `first()` so that the element is still wrapped in a jQuery object, so that you can use `clone()` on it. When an element is created it has a document as owner, see [ownerDocument](https://developer.mozilla.org/en-US/docs/Web/API/Node.ownerDocument), and it can't change owner. – Guffa Sep 14 '14 at 23:42
OK, thanks. I had read about owners before but didn't fully understand it until now. – Ian Sep 14 '14 at 23:46

Browsers don't load these dynamically inserted images

1 Answers1