Geek Answers Handbook

JQuery: HTML does not update after manipulating <img src> paths

I load external content through loading the jQuery method and manipulate the src attribute of previously loaded img elements 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>

When checking parent HTML via Firebug, the source code changed and a new image path was displayed. However, the HTML displayed in the browser was not updated and pointed to the old path.

In addition, I get the following error in Chrome:

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

Can someone help me please?

0
source share
2 answers

"The original null value is not allowed by Access-Control-Allow-Origin." happens because you open the page locally on your computer, and not through a web address. Chrome verifies that you are not making cross-domain calls, and decided that it will not be able to confirm your calls, because they are local. This may be the key to why the images do not load - the relative path you provided may cause problems. If you save the HTML that appears in jQuery to a new flat HTML file and open it in the same place, will the images display?

+3
source

Check out the XMLHTTPRequest Cross-domain constraint topics, for example here

+1
source

More articles:


All Articles