Load jQuery text file top to bottom on HTML [ Solved ]

[newklear]

Howdy doodee!, need some pointers please

Situation:

I have a text file that is updated one line at a time.
I can change the order of how each line is saved in the text file (i.e inserted at beginning of file or end of text file).
Using text matches if line is a repeat, the line is deleted and inserted with the new line.
So far this works just as it should.

As this text file is updated, each line is displayed on a html page using:

<div id="showtxt"></div>

Here is the Javascript:

function readText(){
    jQuery.ajax({
        url : "text.txt",
        dataType: "text",
        success : function (data) {
            var lines = data.split('\n'),
                htmlLines = '<p>' + lines.join('</p><p>') + '</p>';
            jQuery("#showtxt").html(htmlLines);
            setTimeout( readText, 1000 );
        }
    });
}

jQuery(document).ready(function() {
    readText();
});

Problem/Objective:

P: The html page updates with the newest line at the bottom, underneath the previous line. Which causes a scrolling effect going from top to bottom.
O: How do I reverse the order ? As in have the newest line update at the top please ?

 

[Thor]

Use prepend

 

[newklear]

Use prepend

Thanks for that Thor, however making use of prepend, the html page still scrolls from top to bottom with the inserted prepend test beneath that. Still battling it to get the opposite effect.

 

[[)roi(]]

Thanks for that Thor, however making use of prepend, the html page still scrolls from top to bottom with the inserted prepend test beneath that. Still battling it to get the opposite effect.

Not sure what you mean scrolls from top to bottom; if you mean you have to scroll down to see the latest entries, then yes that's expected with most files where new entries are appended.

As for having the latest inserts appear at the top, you need simply make sure that the app or process that is appending lines to your text.txt file add its inserts above the other text entries.

 

[Johnatan56]

You have jQuery loaded, right? So you're using the prepend function to add the text to the beginning, and you want to auto scroll to the top when more is loaded?
Why don't you add an id to just above the text you're displaying and just after prepending just smooth scroll to that ID?
You could also try scrollTop of the container.

 

[kolaval]

So if your file is written with the latest info on top. And you read the file from top to bottom into the HTML it should display correctly?

 

[[)roi(]]

So if your file is written with the latest info on top. And you read the file from top to bottom into the HTML it should display correctly?

If the latest info is at the top of the text.txt file; then there is no need read the file in reverse; his current code will work just fine.

 

[[)roi(]]

You have jQuery loaded, right? So you're using the prepend function to add the text to the beginning, and you want to auto scroll to the top when more is loaded?
Why don't you add an id to just above the text you're displaying and just after prepending just smooth scroll to that ID?
You could also try scrollTop of the container.

There's no need for scroll events; if the browser window is currently displaying <div id="showtxt"></div>, then his code will create no scroll event (simply push the content down), nor does it need to if the latest entries are added to the text.txtat the top.

Side note:
If however he can't change the order of that the inserts are added to text.txt; then a simple reverse of lines string array should suffice, assuming of text.txt is not a large file.

function readText(){
    jQuery.ajax({
        url : "text.txt",
        dataType: "text",
        success : function (data) {
            var lines = data.split('\n').reverse() // <-- reverse the order,
                htmlLines = '<p>' + lines.join('</p><p>') + '</p>';
            jQuery("#showtxt").html(htmlLines);
            setTimeout( readText, 1000 );
        }
    });
}

 

[Johnatan56]

There's no need for scroll events; if the browser window is currently displaying <div id="showtxt"></div>, then his code will create no scroll event (simply push the content down), nor does it need to if the latest entries are added to the text.txtat the top.

Yeah, assumed he wanted it in case someone scrolls down and then move back to top on new entry added.

 

[[)roi(]]

Yeah, assumed he wanted it in case someone scrolls down and then move back to top on new entry added.

The way I read it is that he wanted to avoid the need to scroll.

 

[Johnatan56]

The way I read it is that he wanted to avoid the need to scroll.

Yeah, read it as don't make it so you have to scroll when you add, but when you are already further down, scroll back to the top on new entry, reversing what he has now (as I am unsure if he wants or doesn't want that effect).

 

[newklear]

Thank you for all the feedback, I am still trial'ling and error'ing with the methods mentioned here.

Perhaps some more detail will help;
The App that is writing to the text file does so at random intervals relying on event triggers. The text that is written as a new entry if no matches are met, else that matching line in the text file is deleted and replaced with the new line where the deletion occurred.

The new line displays a timestamp. Each line also contains html tags. Some lines will have more frequent matches and deletions than others throughout different times of the day.

The effect in the html page is, the new line additions are displayed right at the bottom of the page. So with a larger text file, the process of navigating to the bottom is quiet tedious. Once You get to the bottom of the page, the updates are beautiful. Just wish the process it does now was the other way around.

I am still testing with the prepend() method but seems too display the raw html written in the text file.

 

[Johnatan56]

Thank you for all the feedback, I am still trial'ling and error'ing with the methods mentioned here.

Perhaps some more detail will help;
The App that is writing to the text file does so at random intervals relying on event triggers. The text that is written as a new entry if no matches are met, else that matching line in the text file is deleted and replaced with the new line where the deletion occurred.

The new line displays a timestamp. Each line also contains html tags. Some lines will have more frequent matches and deletions than others throughout different times of the day.

The effect in the html page is, the new line additions are displayed right at the bottom of the page. So with a larger text file, the process of navigating to the bottom is quiet tedious. Once You get to the bottom of the page, the updates are beautiful. Just wish the process it does now was the other way around.

I am still testing with the prepend() method but seems too display the raw html written in the text file.

You can prepend <p> text </p> to make it html.

Where is the search/fitler happening? Client side? Are you using a normal filter function? Do note searching through the DOM is really slow, if the dataset is small enough, it is probably faster to keep it as a JS Object/Array and search through that, updating the DOM after.

 

[newklear]

A solution and seems to have a stable and fluid effect:

 <body onload="go2bot()">

function go2bot() {
    window.scrollTo(0,document.body.scrollHeight);
    setInterval(autoScrolling, 1000);
}

Thank You everyone, this has been a good learning experience!

 

[[)roi(]]

For a have a solution and seems to have a stable and fluid effect:

 <body onload="go2bot()">

function go2bot() {
    window.scrollTo(0,document.body.scrollHeight);
    setInterval(autoScrolling, 1000);
}

Thank You everyone, this has been a good learning experience!

Did you try a simple reverse order for the entries? Avoids the need to scroll re newest entries at top and oldest at the bottom.

function readText(){
    jQuery.ajax({
        url : "text.txt",
        dataType: "text",
        success : function (data) {
            var lines = data.split('\n').reverse(), // <-- reverse the order,
                htmlLines = '<p>' + lines.join('</p><p>') + '</p>';
            jQuery("#showtxt").html(htmlLines);
            setTimeout( readText, 1000 );
        }
    });
}

 

[newklear]

Did you try a simple reverse order for the entries? Avoids the need to scroll re newest entries at top and oldest at the bottom.

function readText(){
    jQuery.ajax({
        url : "text.txt",
        dataType: "text",
        success : function (data) {
            var lines = data.split('\n').reverse(), // <-- reverse the order,
                htmlLines = '<p>' + lines.join('</p><p>') + '</p>';
            jQuery("#showtxt").html(htmlLines);
            setTimeout( readText, 1000 );
        }
    });
}

Thank You so much [)roi(] !!!
Mission accomplished, that was a fantastic fix

Final solution is embedding in a responsive iframe

 <div class="embed-responsive embed-responsive-16by9">
              <iframe class="embed-responsive-item" src="/inserted_page" allowfullscreen></iframe>
            </div>

and as per your suggestion:

function readText(){
    jQuery.ajax({
        url : "textsource.txt",
        dataType: "text",
        success : function (data) {
            var lines = data.split('\n').reverse(), // <-- reverse the order,
                htmlLines = '<p>' + lines.join('</p><p>') + '</p>';
            jQuery("#showtxt").html(htmlLines);
            setTimeout( readText, 1000 );
        }
    });
}

jQuery(document).ready(function() {
    readText();
});

Thanks guys, you have been great! to add a sneak Preview: