Question

I have this html:

<div class="box" id="n5">
    <p class="text">Lorem ipsum dolor sit amet</p>
    <textarea id="contentArea" rows="10" cols="50"></textarea>
    <div class="more">LikeAlink</div>
</div>

and this jQuery function:

$(document).ready(function(){
    $(".box .more").click(function(event){
        $.ajax({
            url : "test.txt",
            success : function (data) {
                $("#contentArea").html(data);
            }
        });
    });
});

I found this solution on the Internet as an example. Why does it not work for me?
I use Chrome, but the example worked on this browser.

Content does not not appears in the text box.
Example

edit:

I have this error message in the console:

XMLHttpRequest cannot load file:///C:/wamp/www/test.txt. Origin null is not allowed by Access-Control-Allow-Origin

edit #2:

for those interested, it seems to be a problem in Chrome on local servers. To test, start Chrome with this argument

–disable-web-security

chrome.exe –disable-web-security

Answer 1

As per your comment

XMLHttpRequest cannot load file:///C:/wamp/www/text.txt. Origin null is not allowed by Access-Control-Allow-Origin

This is because you’re loading it from the file system instead of serving it through a web server.

I did that exact same thing with some JSON data and had the same results. Setup the correct MIME type in your web server and serve from http://example.com/text.txt instead of file:///C:/wamp/www/text.txt

If you think you have everything configured properly, try logging what the data returns as a first step.

$(document).ready(function(){
    $(".box .more").click(function(event){
        $.ajax({
            url : "test.txt",
            success : function (data) {
                // either
                alert(data);
                // or
                console.log(data);
            }
        });
    });
});

Read more on jquery.ajax over at the jQuery site.

http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/jQuery.ajaxSetup/