How to grab text from text src?

Question

I'd like to be able to extract text data located on other page within the same server in order to make the page source looks more organized.

I included a text from the server using the following html tag.

<text id='sampleText' src='data/sampleText.txt'></text>

I went to the address to clarify if the path is working. After making sure that it's there, then I wrote the javascript to grab it.

document.getElementById("sampleText").value //return: ""

.innerHTML doesn't work either. Is there a way to grab the text via javascript? Or is it my html tag that is wrong? Perhaps both?

There's no such HTML tag as ``, nor anything like it. You could maybe use an iframe, or just fetch the extra content with AJAX. — IMSoP, Jul 17 '14 at 22:25
I deliberately mentioned a couple of terms which should lead you to plenty of search results if you're not familiar with them, because I don't have time to write a full answer right now, but someone else may well come along with a more detailed explanation. — IMSoP, Jul 17 '14 at 22:36
The exact answer also depends a lot on what you want to do with that text: are you just displaying it on the page, or using it as the input to some other JavaScript functionality? — IMSoP, Jul 17 '14 at 22:41
Yes, I want to pass it to a function that will color it and stuffs. I can do it using css, but a lot of people tell me to try javascript, so I'm studying it right now. And I've learned so much already from posting a single question. You guys rock! :) — user3838314, Jul 17 '14 at 22:49
See my answer. You will want to learn and use jQuery. You can easily get ajax data, and once you have the data you can easily apply and remove CSS styles. jQuery. jQuery. jQuery. — Chris Fremgen, Jul 17 '14 at 22:58
Colour is not an attribute of a string - you can't have a JS variable that contains a red piece of text. You could have a variable which contained some HTML ready to inject into the page, or you could put the text into place on the page, and then style it, probably using CSS. — IMSoP, Jul 17 '14 at 22:59

score 1 · Accepted Answer · edited May 23 '17 at 11:50

You're going to want to use an ajax call to get the data from your file and append it to the page.

The best/easiest way to do this is using jQuery's .get() function.

Have a look here: jquery - Read a text file?

$(document).ready(function() {
    $.get("data/sampleText.txt", function(data) {
        $("sampleText").text(data);
    });
});

There is also the .load() function, but I would recommend .get() since you can do more with the data if you need to in the future.

.load() will inject the data directly in to the DOM where you place the call.

score 0 · Answer 2 · answered Jul 17 '14 at 22:36

I think you schould use the jquery .load() function.

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
    <text id="test">
        test
    </text>
    <script>
        $('#test').load('text.txt');
    </script>
</body>
</html>

score -1 · Answer 3 · answered Jul 17 '14 at 22:29

Fetching through ajax is definately the way to go.. I've seen this feature implemented in a lot of sites, I even see it a lot in mysql server (latest version) when editing queries for execution.

You also need to change your html element like the previous IMSop said.

How to grab text from text src?

3 Answers3