Ajax is failing to get the content

Question

I am new to the ajax. This is the simple code i am trying to compile. I dont know why it is not able to get the contents of the file.

Here is my code:-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.ajax({url:"text.txt", success: function(result){
            $("#div1").html(result);
        }}).fail( function() {
                alert('Failed to get the content');
        });

    });
});
</script>
</head>
<body>

<div id="div1"><h2>Ajax</h2></div>

<button>Get Content</button>

</body>
</html>

please someone tell me where i am going wrong.

Thnaks in advance.

UPDATE :- After some trial and error and i got the desired result. I missed out declaration of datatype that is dataType:"text" Now code is working perfectly.

You need to fully describe your problem. Does the fail function run? Are there errors in the Console of your developer tools? Can you see the request and response in the Network tab of your developer tools? — Quentin, Feb 05 '16 at 12:39
Change your fail to `.fail(function( jqXHR, textStatus, errorThrown ) { console.log(textStatus,errorThrown)})` — mplungjan, Feb 05 '16 at 12:41
change the URL to full absolute URL: `http://example.com/path/text.xml` and also test if that URL works in your browser — Gavriel, Feb 05 '16 at 12:41
10 to 1 says [this](http://stackoverflow.com/questions/20041656/xmlhttprequest-cannot-load-file-cross-origin-requests-are-only-supported-for-ht) is a duplicate — Quentin, Feb 05 '16 at 12:41
@mplungjan — I can't see any way that that would help unless the server was sending `Content-Type: application/json` for `.txt` files and the file didn't contain JSON … but that isn't likely. — Quentin, Feb 05 '16 at 12:42
so console.log the actual arguments. `.fail( function() { console.log(arguments); })` and see what the error message is actually saying. — epascarello, Feb 05 '16 at 12:44
So stop wasting our time and post all information including the file in question — mplungjan, Feb 05 '16 at 12:55

score 0 · Answer 1 · answered Feb 05 '16 at 12:48

0

Where is your file is located? Make sure you have text.txt file in the same location as your html page.

answered Feb 05 '16 at 12:48

Nilkamal Shah

11
3

Please do not post comments as answers, Instead ANSWER the question with a valid answer to earn enough rep to comment – mplungjan Feb 05 '16 at 12:51

score 0 · Answer 2 · answered Feb 05 '16 at 13:15

0

Your code works perfectly if file containing jquery code and text.txt file both are in same folder.

answered Feb 05 '16 at 13:15

Manoj Kulkarni

86
1
6

yeah both are in same folder – abhillier Feb 05 '16 at 13:22

score -1 · Answer 3 · answered Feb 05 '16 at 12:55

Try error handling like this:

$(document).ready(function() {
  $("button").click(function() {
    $.ajax({
      url: "text.txt",
      success: function(result) {

        $("#div1").html(result);

      },
      error: function(xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(thrownError);
      }
    });
  });
});

instead of using fail

Ajax is failing to get the content

3 Answers3