-1

I am needing to load in an external text document, break it into its individual lines, and display one of the lines. This is only the first step of a much larger project, but I am trying to get this to work before I proceed. I have tried several different things, and this is currently what I have.

function capFunction() {
    jQuery.get("CSCI-Classes.txt", function(data) {
        var group=data.split("/n");
        document.getElementById("testDisplay").innerHTML = group[1];
    });
}

When I run this function with a button press in my html file, nothing at all happens. Any JS wizards feeling helpful?

noufalcep
  • 3,446
  • 15
  • 33
  • 51
jGutilla
  • 3
  • 2
  • Are you trying to get file from local filesystem at file: protocol? – guest271314 Mar 15 '17 at 02:02
  • I'm new to all this, so I'm not entirely sure what you mean. I'm not running anything off of a server of any kind, everything is on my local machine and I'm just running the html file. – jGutilla Mar 15 '17 at 15:57
  • See http://stackoverflow.com/questions/42590625/posting-from-local-html-javascript-website-to-an-online-php-file – guest271314 Mar 15 '17 at 16:55

1 Answers1

0

You have your escape character for the new line around the wrong way. It should be \n.

Assuming your file doesn't contain the string "/n", (and assuming the get works correctly) you are asking it to place the second element of the split into the inner HTML, which won't exist.

Apart from this, check your browser console to make sure you aren't getting a 404 when the file is loaded.

EDIT

I have managed to get it working locally using the following code

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
    function capFunction() {
        jQuery.get("CSCI-Classes.txt", function(data) {
            var group=data.split("\n");
            document.getElementById("testDisplay").innerHTML = group[1];
        });
    }
</script>
</head>
<body>
    <input type="button" value="Test" onClick="capFunction()" />
    <div id="testDisplay"></div>    
</body>
</html>

With my CSCI-Classes.txt file simply containing

Test Line 1
Test Line 2
Test Line 3

I see the value Test Line 2 displayed as the inner HTML of the testDisplay div.

Note that this only works when I run this using an application server, when accessing the HTML file via the file: protocol it gives a cross-origin error.

Daniel Bernsons
  • 650
  • 7
  • 20
  • A silly mistake, but even after correcting the new line character, the data still does not display. I'm not getting any errors that I can see, just a lack of action in the HTML page. *edit - Upon checking, the console is saying that capFunction is not defined. I'm no sure why that would be the case. – jGutilla Mar 15 '17 at 02:02
  • Without seeing more of your code, such as the html, it's going to be hard to diagnose that I'm afraid. – Daniel Bernsons Mar 15 '17 at 02:16
  • How might I get this working without the use of an application server? – jGutilla Mar 15 '17 at 15:58
  • You would have to host the file remotely. You cannot perform an AJAX request against a local file accessed via `file:///`, at least not normally. The following SO question covers this in greater detail, including a workaround for Chrome so you can get it working for yourself - although I would still recommend you utilise a local app server of some kind for development. http://stackoverflow.com/questions/4819060/allow-google-chrome-to-use-xmlhttprequest-to-load-a-url-from-a-local-file – Daniel Bernsons Mar 15 '17 at 22:09