jQuery: load txt file and insert into div

Question

I want to load a *.txt file and insert the content into a div. Here my code:

js:

$(document).ready(function() {
    $("#lesen").click(function() {
        $.ajax({
            url : "helloworld.txt",
            success : function (data) {
                $(".text").html(data);
            }
        });
    });
});

html:

<div class="button">
    <input type="button" id="lesen" value="Lesen!" />
</div>

<div class="text">
    Lorem Ipsum <br />
</div>

txt:

im done

If i click on the button firebug report following error:

Syntax-Error
im done

I don´t know what to do :-(

Use @Dogbert 's answer. Ignore the error message for now. It is just a sort of "ghost" error that will disappear if you try the code on an http server. It's the browser's way of complaining that what you're trying to do was meant for http://, not file:///. — Cannicide, Apr 26 '17 at 23:31

score 63 · Accepted Answer · answered Jun 24 '11 at 16:08

63

You need to add a dataType - http://api.jquery.com/jQuery.ajax/

$(document).ready(function() {
    $("#lesen").click(function() {
        $.ajax({
            url : "helloworld.txt",
            dataType: "text",
            success : function (data) {
                $(".text").html(data);
            }
        });
    });
});

answered Jun 24 '11 at 16:08

Dogbert

212,659
41
396
397

@Khazl, what's the exact error message. Can you copy and paste here? – Dogbert Jun 24 '11 at 16:21
f(a=div.text, c="fxqueue", d=undefined, e=true) f(a=div.text, c="fxqueue", d=function()) f()jquery....min.js (Zeile 16) f(a=[div.text], c=function(), d=undefined) f(a=function(), b=undefined) f(a="fx", c=function()) f(a=3000, b="fx") success(data="im done") f(e=Object { url="helloworld.txt", isLocal=true, mehr...}, f=["im done", "success", Object { readyState=4, responseXML=document, mehr...}]) g(a=200, c="success", l=Object { xml=document, text="im done"}, m="") g(a=readystatechange , e=undefined) im done – Khazl Jun 24 '11 at 16:27
i fix it :-) the problem was that i work local without apache... done! – Khazl Jun 24 '11 at 16:36

jncraton · Answer 2 · 2011-06-24T16:19:16.607

37

You could use jQuery.load(): http://api.jquery.com/load/

Like this:

$(".text").load("helloworld.txt");

edited Jun 24 '11 at 16:19

answered Jun 24 '11 at 16:06

jncraton

9,022
3
34
49

score 5 · Answer 3 · edited Apr 05 '12 at 14:04

5

The .load("file.txt") is much easier. Which works but even if testing, you won't get results from a localdrive, you'll need an actual http server. The invisible error is an XMLHttpRequest error.

edited Apr 05 '12 at 14:04

antyrat

27,479
9
75
76

answered Apr 05 '12 at 01:21

andersna75

51
1
3

score 2 · Answer 4 · answered Jun 24 '11 at 16:08

You can use jQuery load method to get the contents and insert into an element.

Try this:

$(document).ready(function() {
        $("#lesen").click(function() {
                $(".text").load("helloworld.txt");
    }); 
});

You, can also add a call back to execute something once the load process is complete

e.g:

$(document).ready(function() {
    $("#lesen").click(function() {
        $(".text").load("helloworld.txt", function(){
            alert("Done Loading");
        });
   }); 
});

score 0 · Answer 5 · edited Sep 09 '15 at 14:06

0

 <script type="text/javascript">     
   $("#textFileID").html("Loading...").load("URL TEXT");
 </script>  

 <div id="textFileID"></div>

edited Sep 09 '15 at 14:06

Jax

1,839
3
18
30

answered Sep 03 '15 at 14:42

Elon Gomes Vieira

448
6
7

score 0 · Answer 6 · answered Jun 24 '11 at 16:07

0

Try

$(".text").text(data);

Or to convert the data received to a string.

answered Jun 24 '11 at 16:07

Jose Faeti

12,126
5
38
52

jQuery: load txt file and insert into div

6 Answers6

Linked

Related