How Do I Load Text into a Div or Container?

[CarlAvery]

Hello-- I'm new here and wasn't sure which forum to post this question to, so if I've posted it in the wrong place, I apologize.

 

A little background: I used to be quite proficient with HTML and reasonably proficient with Javascript and CSS, However, I haven't used them for years and am having to do a lot of brushing-up.

 

I want to create an informational web site with a number of articles. I want to set up the main page in a simple fashion, with a "banner" across the top and three containers forming columns below. The left and right column contain links to articles on the site, and the the center column will display the articles.

 

So, the question is: What command or script do I use to set it up so that when the viewer clicks a link in the left or right column, the article is displayed in the center container? Note that the articles are in the same domain as the main page. The articles are text files with HTML formatting tags.

 

This should be very simple to do, and yet I've not been able to find or figure out how to do it. I've looked through the HTML, CSS, and Javascript tutorials here, and they either don't tell how to do this, or I missed the one that does. I've also done a couple of dozen Google searches, and although I found a few "similar" questions on various forums, none of them was quite on point and none of the solutions worked for this.

 

If anyone can point me to a tutorial that tells how to do this, I would greatly appreciate it. Thank you!

[davej]

Maybe take a look at...

 

http://www.w3schools.com/ajax/ajax_xmlfile.asp

[CarlAvery]

Thank you for your response. I noticed that tutorial while reading through, but skipped over it because it appears to construct a table and then insert data from a separate document into the table. However, it might work for what I want to do, if I take out all the table instructions.

 

Thanks again!

Edited March 31, 2014 by CarlAvery

[CarlAvery]

Hmm.... well, after fiddling with this for a while, I'm not having any luck. (It could be that I don't know enough about Javascript/AJAX.) It seems to me that there should be a much simpler method-- one that amounts to: "If this link is clicked on, retrieve (specified document) and insert it into (specified container)." Or am I hoping for too much?

 

Sorry if I sound like a nitwit-- as I said, it's been a long time since I used this stuff and I'm appalled at how much I'd forgotten. The old saying is so true: "Use it or lose it."

[davej]

Well, I think it is a very good topic and I'm not sure how many different approaches there might be. One very simple approach that might work would be to use an iframe. Also I don't know if it is ever possible to actively (on-demand) add an include file. You can of course load the data with the page, or hide the data on the page, but that is inefficient, especially if the files are large.

 

http://www.w3schools.com/tags/tag_iframe.asp

[CarlAvery]

Thank you again. The iframe looks interesting; I will experiment with it. I may need to change my whole approach to this thing. Fortunately, it's still in the very early stages, so nothing is "cast in stone." And I've still (obviously!) got a lot of learning and re-learning to do.

 

By the way, I like the cat picture in your avatar; it reminds me of a cat a friend of mine used to have.

[CarlAvery]

Well, I've been playing around with the iframe, and so far, it works beautifully!! It's exactly what I was looking for-- a simple, elegant solution! Thank you so much! I've been pulling my hair out over this for days. You've saved the rest of my hair from being pulled out and my desk from being beaten to splinters from pounding my head on it!