CODEWITHSUNDEEP
javascriptjqueryhtmlload
ngmir
ngmir

Reputation: 488

jQuery's load() doesn't display images

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

Upvotes: 0

Views: 1622

Answers (2)

Martin Nycander
Martin Nycander

Reputation: 1309

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.

Upvotes: 2

Myles
Myles

Reputation: 21510

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.

Upvotes: 0

Related Questions