Reading from external txt file and adding it (as text content) to a page

[ladlon]

Sorry, I can’t seem to find a good reference to this anywhere on the Web, other than very complex versions or examples that do something far more complex than I need…

I’m just trying to figure out how to read from a simple txt file (that resides on the server with the other HTML files), that is read in (via Javascript) and displayed on the page (…for example, a daily news section). I’ve done this easily in Flash, years ago, but I’m a little puzzled by the correct, current way of doing it in HTML with Javascript.

I have seen things as simple as news = “c:\News\news.txt”… but, that’s for a local file, and I’m not sure that would work with a relative online URL (…if that even works at all!).

I’ve seen it done via loadStrings, which looked promising… but I couldn’t get that to work. (It’s not vanilla Javascript, but requires P5.js)

I imagine (once it’s in) I’d utilize innerHTML to actually place it in a spot, specified by ID.

Ideally, I could inject the text as actual HTML, rather than pure text, so that I could have tags on various parts of the external text, to allow CSS styling to be targetted to those different parts… although, I wouldn’t complain if it just comes in as pure text to be displayed literally (as a text block).

Just looking for very simple 'plog this text from an external file into this < div > or < p >… Any help?

UPDATE: I’m currently trying to do it with JQuery, but am having no luck there, so far, either…

UPDATE2: Okay, this is odd… I got it to work with JQuery (using .load)… but it only appears to work in Pinegrow’s preview, and not in my external browser (Firefox). Normally, I’d think I have some security-based blocking happening… but I’m not sure if that’s the case.

[droidgoo]

php shell_exec() will run any kind of linux script to process the text file on the server and you can just echo it back to your html page by putting a <p> </p> around it.

[RobM]

You were on the right track. Remember jQuery/JavaScript are executed on the client side, so you need to use some method to communicate back to the server. The jQuery .load() is Ajax shorthand to do just that.
Basically, you are doing a specialized Ajax .get() where the load places the returning data into a specified element, so, $('#id').load('relative file name', callback);. The callback is optional.
This uses innerHTML to place the loaded content into the element you specified with the id, so feel free to use any markup.
So, for example,

I have a card here with some text I want to replace. It has an id of replaceMe’
Add a quick script to the bottom after jQuery loads:

Create a new file with my replacement text - note the positioning of the file- in the assets folder at the same level as the index.html file that is calling it:

Turn on JavaScript and potentially reload:

Or show in the browser:

Also works in Firefox:

[ladlon]

Thanks for the responses, guys.

@RobM Awesome, that should help a lot. I’ll have to try that out when I have a chance.

I’ve previously been completely in experienced in any server type stuff, and virtually web coding in general (Javascript, etc). I only really taught myself Javascipt this year (although I’m familiar with Flash’s Actionscript, so it was a pretty easy transition). I’m just starting to dip into things like JQuery. Things like Ajax and PHP are completely new territory for me, but I’m happily absorbing whatever knowledge I can get.

[droidgoo]

i didn’t know the first thing about php but inside of a month i had a working page that interacted with a database on the server to do what i wanted done… no j-anything.

you do have to have a host web server that’s willing to let you in tho, the bare bones ones don’t offer that.

[ladlon]

If/when I’d use it, it would actually be for someone else’s site. They are not at all website savvy, so my intention would be to set something up where they just update a text file (containing weekly news), and upload it… a way for them to continually add/change the News content without risk of messing up the rest of the site (… or having to edit within a file whose News section is surrounded by ‘intimidating looking code’).

At worst, I just code the page so that there’s lots of space between the News ‘type your stuff here’ section and the rest of the code, and put in plenty of comments to guide them. Normally, I’d just update it for them all the time, but I wanted to look into possible solutions that wouldn’t require relying on me exclusively… just in case.

I wonder if there’s a difference (as far as complications/compatibility, server support, etc) between actually adding HTML code into a page, vs somehow just displaying a text document. It would seem the latter would be ‘less of a security/complex feature’ thing… but I know little of the subject. It was quite easy in Flash, oddly enough.

Would be nice to be able to have the sections of the text file have class tags, so that I could target the style of the headings vs the body text… I suppose, failing that, there’s some more complex way I could have some string if/then lines search for a specific tag character (*, for example) that the guy could put in on text intended as headings, and I could bring stuff in, line by line (or paragraph by paragraph?.. Not sure how it would actually bring stuff in, in that sense).

Meh… Just something I’m kind of thinking of.

[RobM]

Loading through Ajax will let you load full HTML or just plain text. Not sure how easy it will be for the client to added classes and such or get the document onto the server.

[ladlon]

I’d have the classes pre-defined in the CSS file, and would just provide the client with a pre-made text file (with filler text) that has the appropriate DIV tags and class attributes. They would just have to replace the text. I’d give him a full lesson on how to work with it. And then, theoretically, they’d just upload that text file to their webspace… or, that’s what I’m assuming.

Right now, they are with WIX, using their (…shudder…) drag and drop web builder. The site works, but my face almost melted when I looked at the code for just a single page… I think it was larger than the Bible… and I’ll be damned if I could figure out where anything was. There certainly was a lot of redundant/unused stuff… like it kept every revision to things like fonts, colours, etc, rather than deleting the previous code! The scrollbar was like a little sliver!