Why doesn't my jQuery load function work? - On Chrome

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

You need to specify what you mean by not work? There are many things that could go wrong with that code — gideon, Feb 17 '12 at 02:43
@Pier-alexandreBouchard: I just tested your linked example. It works for me in Chrome. — , Feb 17 '12 at 02:45
Where did you try it? You should open chrome developer tools and see what the errors are, does the `text.txt` file exist? — gideon, Feb 17 '12 at 02:46
@amnotiam yeah the example works, but with my own code, it doest not appears.. — Pier-Alexandre Bouchard, Feb 17 '12 at 02:47
@gideon It says: XMLHttpRequest cannot load file:///C:/wamp/www/text.txt. Origin null is not allowed by Access-Control-Allow-Origin. — Pier-Alexandre Bouchard, Feb 17 '12 at 02:49
I am trying http://127.0.0.1/test.txt and directly from the local.. Both does not works. — Pier-Alexandre Bouchard, Feb 17 '12 at 03:07
what does chrome developer tools say the `Type` is on that file? — Chase Florell, Feb 17 '12 at 03:15

Chase Florell · Accepted Answer · 2012-02-17T03:12:08.980

2

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/

edited Feb 17 '12 at 03:12

answered Feb 17 '12 at 02:40

Chase Florell

46,378
57
186
376

Look at the link I give as online example. They used a php file, I presume they just change the header ? Because with txt in dev tool, I get XMLHttpRequest cannot load file:///C:/wamp/www/test.txt. Origin null is not allowed by Access-Control-Allow-Origin. – Pier-Alexandre Bouchard Feb 17 '12 at 02:50
I try to configure my web browser. But, with a MIME of JSon, its just a text file content, will it works ? – Pier-Alexandre Bouchard Feb 17 '12 at 02:57
In chrome developer tools (network tab) you will see what the MIME `Type` is when it's called. – Chase Florell Feb 17 '12 at 02:59
I used a random json file I found on the internet. I looked at my WAMP server config doing a phpinfo() in a test php file and It says JSON support is enabled. now, I directly use http://127.0.0.1/test.json, but It does not work ! – Pier-Alexandre Bouchard Feb 17 '12 at 03:15
what does chrome developer tools say the `Type` is on that file? – Chase Florell Feb 17 '12 at 03:15
Can you also show the content of the `test.txt` file? (or a snippet of it) – Chase Florell Feb 17 '12 at 03:16
undefined.. in the console: XMLHttpRequest cannot load http://127.0.0.1/test.json. Origin null is not allowed by Access-Control-Allow-Origin. – Pier-Alexandre Bouchard Feb 17 '12 at 03:17
@Pier-alexandreBouchard: See [this question](http://stackoverflow.com/questions/2541949/problems-with-jquery-getjson-using-local-files-in-chrome) and specifically the comments under the question. There are some flags you can try setting when launching Chrome that may clear this up for you. – Feb 17 '12 at 03:17
can you humor me by changing the file extension from `.txt` to `.json` and then make sure your web server is serving that file extension with the `application/json` content type... see if that makes a difference. – Chase Florell Feb 17 '12 at 03:19
@ChaseFlorell This is what I did. I use test.json, but my phpinfo() said json was running on my server. But application/json does not actyally work so I think problem is on the server side. – Pier-Alexandre Bouchard Feb 17 '12 at 03:22
@ChaseFlorell: I think he already did that. Two previous comments show that he's tried `127.0.0.1/test.json`. – Feb 17 '12 at 03:22
@amnotiam, I see that, but just because phpinfo says json is running doesn't mean that apache is serving the json file extension with the appropriate content type. He says the console is saying the type is `undefined` (as per comment 11) – Chase Florell Feb 17 '12 at 03:28
@amnotiam I looked at the questions, but if code works in the online example, It should works for me too even on Chrome problem? – Pier-Alexandre Bouchard Feb 17 '12 at 03:29
@Pier-alexandreBouchard: Are you serving both the initial page, and the AJAX content from the web server at `127.0.0.1`? – Feb 17 '12 at 03:33
In the online example, the type is not json but actually text/html – Pier-Alexandre Bouchard Feb 17 '12 at 03:33
@amnotiam Yeah, bot files are in the same directory. I also test only "test.json" but nothing – Pier-Alexandre Bouchard Feb 17 '12 at 03:34
Guys, I downloaded the complete online example on my server and I set up the url to http://www.roseindia.net/ajax/jquery/jquerydemo/textContent.php and I does not works. So, it is on my server ? – Pier-Alexandre Bouchard Feb 17 '12 at 03:41
@Pier-alexandreBouchard: But I mean are you using `127.0.0.1` as the URL in the web browser and in the AJAX request? – Feb 17 '12 at 03:42
@Pier-alexandreBouchard: And that url doesn't work even when you type it directly into the web browser? (You should change it back to `.txt`, if you're not serving JSON data.) – Feb 17 '12 at 03:49
Directly, It works, so the path is not the problem. There is a problem on the server side I think. It does the same with the execution of the saved version from the online one and it does the same – Pier-Alexandre Bouchard Feb 17 '12 at 03:53
@Pier-alexandreBouchard: And when you click on the `Network` tab of the Chrome developer tools (after you attempted the AJAX), and you see your `test.txt` file in the list, what does it say under the `Status` column and the `Type` column for that file? – Feb 17 '12 at 03:57
@amnotiam After the ajax request, I get this:. Method: GET, Status: (cancelled), Type undefined, initiator code.jquery.com/jquery-latest.js:8102 Script – Pier-Alexandre Bouchard Feb 17 '12 at 04:03
1

@Pier-alexandreBouchard: Have you tried launching Chrome with `--disable-web-security`? – Feb 17 '12 at 04:10
1

Okay, I saw it before in the question, but didn't test it. It works now. But, will it work for people who will access my server ? (because I will host my project) – Pier-Alexandre Bouchard Feb 17 '12 at 04:16
@Pier-alexandreBouchard: I just have a feeling that it has to do with hosting from the localhost IP address that Chrome doesn't like. You should also figure out why your web server isn't sending a content type, but once you get your actual server up, the web security issue shouldn't be an issue, as long as the AJAX request isn't cross domain. – Feb 17 '12 at 04:18
Thank you, I will try to understand why there is a problem of security (because type is okay when I pass the argument) – Pier-Alexandre Bouchard Feb 17 '12 at 04:24

Why doesn't my jQuery load function work? - On Chrome

1 Answers1