jQuery load not working with certain .txt file

Question

I have a jQuery load script that strangely works with a text file hosted in one location but not in another. For example, this:

JSFiddle

$(document).ready(function () {
    $("button").click(function () {
       $("#div10").load("https://dl.dropboxusercontent.com/u/29635158/replace.txt", function () {
          alert("Done Loading");
       });
    });
});

...works just fine and is able to load the .txt document from my Dropbox.

But this:

JSFiddle

$(document).ready(function () {
    $("button").click(function () {
        $("#div10").load("http://hs.biocanvas.net/files/replace.txt", function () {
           alert("Done Loading");
        });
    });
});

...is the exact same script with the exact same .txt file, except that .txt file is now hosted on a different server (and the URL accordingly changed in the script). However, the .txt file isn't loaded into the targeted div.

Both .txt files are readable if you copy + paste their URLs into a browser.

Any thoughts? Thanks for your help.

Answer 1

The problem could be a cross-domain request. If you are using PHP or other server technology, you need allow the permissions in your application, but if you are using phonegap, that not is necessary.

Access-Control-Allow-Origin: http://example.org/

Or, if it’s a public resource:

Access-Control-Allow-Origin: *

As reference, you can read this post: HTTP access control (CORS) Developer mozilla

or AJAX - Introducing Cross-domain Request (XDR)

Answer 2

A bit late - but just to confirm user3294396 answer, if you run the code and look in the console, you'll probably see an error like:

XMLHttpRequest cannot load http://hs.biocanvas.net/files/replace.txt. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 

So you need to set up explicit access on the server.