jQuery: HTML is not updated after manipulating 2020-03-31 03:19发布 站内问答 / jQuery 877 2 5

Question

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?

Answer 1

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?

Answer 2

Check XMLHTTPRequest Cross-domain Restrictions topics, for example here