ansaurus

Question

Resolving relative resources in AJAX content

Answer 1

+3 A:

The problem is that you are inserting the arbitrary HTML into the originating document. The browser has no way of knowing that the data in question is actually from another document. Here is a breakdown of what is going on:

DOM (before):

<html><body>
  <div id="insert-here"></div>
</body></html>

DOM (after):

<html><body>
  <div id="insert-here"><img src="foo.png"></div>
</body></html>

The fact that the html snippet in question came from some other html reference is lost because of the way the data was inserted. I would say that the easiest solution is to change the paths that are in the ajax-content.html file. You could do this either in the file itself (perhaps automatically through whatever tool uploads the ajax plugins) or else mangle the paths after the document is loaded. So instead of doing

$("#insert-here").load("x/ajax-content.html");

You'd have to get the data, then adjust any paths, then insert the data into the DOM.

function updatePaths(responseText, textStatus, XMLHttpRequest) {
  // check xmlHttpRequest status code
  // parse responseText, fix up relative URLs
}
$("#insert-here").load("x/ajax-content.html", null, updatePaths);

Mr. Shiny and New 2009-07-09 20:22:26

ansaurus

tags:

views:

answers:

Resolving relative resources in AJAX content

related questions