1

I am loading external content via the jQuery method load and manipulate the src attribute of the img elements previously loaded as follows:

<div id="content"></div>
<script>
  $("#content").load("additional_content.html #content table", function() {
    $("#content").find("img").each(function() {
      $(this).attr("src", "new_path/" + $(this).attr("src"));
    });
  });
</script>

While inspecting the parent HTML via Firebug, the source code changed and reflects the new image paths. However, the HTML rendered within the browser was not updated and points to the old path.

In addition, I am getting the following error within Chrome:

XMLHttpRequest cannot load file:///.../additional_content.html. Origin null is not allowed by Access-Control-Allow-Origin.

Can someone help me, please?

labrassbandito
  • 535
  • 12
  • 25

1 Answers1

3

The 'Origin null is not allowed by Access-Control-Allow-Origin.' is happening because you are opening the page locally on your machine and not via a web address. Chrome is checking you are not making cross-domain calls and has decided it can't verify your calls because they are local. This may be a clue as to why the images aren't loading - the relative path you've given may be causing issues. If you save the HTML that shows in jQuery to a new flat HTML file and open it in the same location, do the images show?

Liam Galvin
  • 706
  • 3
  • 12
  • Thanks again Liam. I changed my relative path to the complete URL and the images changed in Firefox. So, their was maybe a problem on the local site. Regarding Chrome, it does not work right now locally, but I am confident that it will work when uploading the page. – labrassbandito Nov 16 '10 at 13:51