how to display a .txt file in jquery

Question

I have a textarea and this javascript code It should work but dosen't is there something wrong? If so, what is it?

$('#text').load("http://hokuco.com/test/xe7/user.txt");

<form action="formcode.php" method="POST">
<textarea name='field2' placeholder='Code here' rows ="40" cols="40" id ="text"></textarea>
<br />
<input type="submit" name="submit" value="Save">
</form>

here is my php file if curious:

<?php
if(isset($_POST['field1']) && isset($_POST['field2'])) {
    $data = $_POST['field1'] . '-' . $_POST['field2'] . "\n";
    $ret = file_put_contents('code.txt', $data, FILE_APPEND | LOCK_EX);
    if($ret === false) {
        die('There was an error writing this file');
    }
    else {
        echo "$ret bytes written to file";
    }
}
else {
   die('no post data to process');
}
?>

Have you bound it to some event, or wrapped in `$(document).ready(function(){});` statement? — n-dru, Feb 02 '16 at 15:42
I hope when html6 comes out they'll add a href control to the textarea tag — parseguy, Feb 02 '16 at 20:04

score 2 · Answer 1 · edited May 23 '17 at 11:45

Due to browser security restrictions, most Ajax requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.

I'm assuming the .txt file is not on the same server/domain as the HTML file that is trying to load it? If you are, then you should use a relative URL, i.e.:

$('#text').load("xe7/user.txt");

Please refer to: Loading cross domain endpoint with jQuery AJAX

score 0 · Answer 2 · answered Feb 02 '16 at 15:39

0

Does this work?

jQuery

$(function(){


  $.ajax({
    url : "http://hokuco.com/test/xe7/user.txt",
    dataType: "text",
    success : function (data) {
      $("#text").html(data);
    }
  });


});

HTML

<div id="text"></div>

answered Feb 02 '16 at 15:39

Timo

727
5
15

jQuery's load() function doesn't need a datatype. There is nothing wrong with his code, it's just that he's 'violating' the same origin policy. – Laurens Swart Feb 02 '16 at 15:45

score 0 · Answer 3 · answered Feb 02 '16 at 16:23

As other users have said, you are violating the same origin policy. If you are using PHP you could echo that into your textarea.

Something along the lines of:

<textarea id="text">
    <?php 
        $text = file_get_contents('http://hokuco.com/test/xe7/user.txt');
        echo $text;
    ?>
</textarea>

n-dru · Answer 4 · 2016-02-02T21:04:57.813

If the above code is all there is (as you state in your comment to your question), and you have included jQuery, then mere refreshing of the page won't give you the result. As your HTML code is below this jQuery call, the DOM is not ready yet when the function is called. Therefore you need to call this function when the document is ready, according to the rule that all jQuery calls that relate to DOM elements should be made this way:

$(document).ready(function(){
    $('#text').load("test/xe7/user.txt");
});

how to display a .txt file in jquery

4 Answers4

Linked