JQuery Text File to HTML

Question

I have a text file and I want that text into my <p id="top_ten"></p> I have not used jQuery before, but I was hoping I could give it try. Based on other sources, I feel like I am close, but I must be missing a detail or step somewhere.

This is what I currently have:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>S&#38P 500 Top Performers</title>
    <meta name="description" content="Gather top performers from S&#38P 500"/>
    <link rel="stylesheet" href="../static/css/styles.css"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $.get("../Todays_Top_Ten.txt", function(data) {
            document.getElementById("top_ten").src=data;
        })
    });
    </script>

</head>
<body>

    <h1>S&#38P 500 Top Performers</h1>

    <div class="sec" id ="sec_1">
        <p id="top_ten"></p>
    </div>
    <a href="{{ url_for('top_ten') }}">Top Ten</a>


</body>
</html>

Your code is called before HTML is rendered. So the element you are trying to get by its id does not exist yet. — PM 77-1, Apr 02 '18 at 22:06
something like this? I'm still not sure what the step would be — Mwspencer, Apr 02 '18 at 22:07
do you have any errors if you open the dev console? is anything happening? Can you `console.log(data)` inside `$.get` callback function and does anything print out? — Andrew Lohr, Apr 02 '18 at 22:08
where are you getting the functionality for templating? `{{ url_for('top_ten') }}` — zfrisch, Apr 02 '18 at 22:10
Where is the file `Todays_Top_Ten.txt` ? is it local or is it hosted somewhere? — Andrew Lohr, Apr 02 '18 at 22:10
Okay I just found a source that it needs to be hosted somewhere. I was trying to just test it from my own computer. — Mwspencer, Apr 02 '18 at 22:13
https://stackoverflow.com/questions/6470567/jquery-load-txt-file-and-insert-into-div look here. — Özgür Can Karagöz, Apr 02 '18 at 22:14
is there somewhere I need to define "data" I thought data = text from file, I get a data not defined error message — Mwspencer, Apr 02 '18 at 22:39
@afrisch It's a flask app, so I'm referring to another page using a route in a py file — Mwspencer, Apr 02 '18 at 22:40
`p` tags don't have a `src` attribute... try setting [`.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) or [`.innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) instead. — Useless Code, Apr 09 '18 at 10:02

JQuery Text File to HTML

0 Answers0