jQuery's load() doesn't display images

Question

Good evening everyone,

I am using a JavaScript to load/override content from an HTML-File into specified divs.
You can watch a demo.

The javascript that does the load job looks like the following:

function loadScreenie(elementSelector, sourceURL) {
    $(""+elementSelector+"").load("img/screenies/"+sourceURL+"");
}

and gets invoked by a hyperlink looking like this:

<a href="javascript:loadScreenie('#iphone-screen', 'screenie2.htm');">mibmib</a>

( i have also tried the same with onclick="")

This is the content of screenie2.htm

hello world<br />
<img src="screenie2.png" />

The problem is that images are not displayed. The behaviour is like this:
- you click the link and the javascript is executed.
- the text in screenie2.htm is displayed correctly in the correct div
- the image is not displayed. there also isnt any broken image symbol or an empty space.

Do you have an idea what could cause this error?

Thanks a lot in advance,
-- benny

Answer 1

If you're testing with IE, the problem might be that Jquery uses innerHTML instead of creating individual dom elements with the load command. IE can be very finicky about that.

Answer 2

Ok. Let me conclude to you what is happening here.

1. When link is clicked, jQuery loads "img/screenies/screenie2.htm
2. The image-tag <img src="screenie2.png" /> is inserted into the DOM.

So, we have an image linking to a supposed image at ./screenie2.png, where you would believe it should be linking to ./img/screenies/screenie2.png.

You need to use absolute URLs in your load():ed content.