Use a text file dynamically

@shanevdwJul 12.2006

Hi there

Can somebody please help me. I’ve searched the net and read through3 javascript books and

I’m still not sure how to do it. what I want to do is have a comma separated text file in

the following format:

Desc, File
Bobs House, Bob.txt
Johns House, John.txt
Bills House, Bill.txt

I want to load this text file into a layer on a webpage and just be able to see the Desc and

to be able to click on it as a link and it will open the File that it matches. For Example
I click on Bobs House and the contents in Bob.txt are displayed in a table next to the layer

or another layer. the reason I want to do this is to make the site easy to update. All you

have to do is add another entry in the file and it will open another text file when you

click on it.

I really need help.

Thanks

Shane

to post a comment

JavaScript

23 Comments(s) _↴

@JMRKERJul 12.2006 — #Instead of a text file, create the look-up "Desc,Txt" file as a javascript file

that makes only on array.

Instead of:

[CODE]
 Desc, File
 Bobs House, Bob.txt
 Johns House, John.txt
 Bills House, Bill.txt
 [/CODE]

use:

[CODE]
 // MenuLink.js
 // "Desc, File",
 MenuLink = new Array (
 "Bobs House, Bob.txt",
 "Johns House, John.txt",
 "Bills House, Bill.txt"
 );
 // NOTE: No comma after last entry
 [/CODE]

Then just read in the source file (MenuLink.js),

and use the Array name and '.length' command

to step through the array of entries

to create the display and links

to the '.txt' files in the HTML.

@toicontienJul 12.2006 — #A similar question was asked here: http://www.webdeveloper.com/forum/showthread.php?t=113299

My answer was to use AJAX. Read the other thread for some more info.

@shanevdwauthorJul 13.2006 — #Hi

Thanks for your time and effort.

How do I actually display the text in the text file from the array? I’m still fairly new to javascript.

@ananiasJul 13.2006 — #That depends on how you want it to look. You could create a popup menu button with something like this:

[code=php]var h = "<select onclick='showLink(this)'>";
 for (var i=0; i<MenuLink.length; i++) {
 var s = MenuLink[i].split(", ");
 h += "<option value=' + s[1] + "'>" + s[0] + "</option>";
 }
 h += "</select>";
 s = document.createElement("div");
 d.innerHTML = h;
 h = document.getElementById('myForm');
 h.appendChild(s.firstChild);[/code]

and then write the function showLink(f) (the form) which will be called when the user picks and item.

@shanevdwauthorJul 13.2006 — #Thanks so much I will give this a bash

@shanevdwauthorJul 13.2006 — #Hi,

I tried this at home, but how do I get the actual text file I'm linking to to display?

Do I need to use a tag's src element? I'm not sure. I want to display the text file its linking to in a paragraph on the same page.

This is what I've done:

function createlist() {

var s;

var h = "<br>";

 for (var i=0; i < MenuLink.length; i++){
   s = MenuLink[i].split(", ");
   h += "<a href='#' onclick='showText(" + i + ")'>" + s[0] + "</a><br>"; 
   } 
 
   document.getElementById("test").innerHTML = h;

}

This creates a list in a table cell and when I click the element it passes the text file index that needs to be displayed into the showText() function. In show text I get the text file name, now how do I display this text file in a paragraph next to the cell with the list in?

Please help.

@ananiasJul 13.2006 — #It'd be wiser I think to use a division element rather than a paragraph element to contain the loaded page. That way, if you add more than a paragraph to the page it will still work. Then give the div an id attribute like "loadedText" so that we can find it. Then fix showLink() to issue a get request to load the file and pass it a function that will put the file in the right place:

[code=php]function showLink(f) {
 .
 .
 // url = the url to load
 var xmlhttp = new XMLHttpRequest();
 xmlhttp.onreadystatechange = function() {
 if (xmlhttp.readyState == 4 && xmlhttp.statusText == 'OK') {
 document.getElementById('loadedText').innerHTML = xmlhttp.responseXML.body.innerHTML;
 }
 };
 xmlhttp.open('GET', url, true);
 xmlhttp.send(null);
 }[/code]

You'll have to find out how to make it work in IE yourself. A search for 'xmlhttp activeX' should get you there.

@toicontienJul 13.2006 — #There are plenty of prebuilt javascript libraries to handle AJAX requests. One such library, as I mentioned above, is Prototype. It might be a bit heavy for your use, but there are JS libraries that are smaller in file size.

@James_GatkaJul 13.2006 — #shanevdw:

This works in IE only. Test it AS IS, meaning copy it AS IS, then save it as an .html document. Create the nameList.txt document as shown. Put them in the same folder. The code will read each line of the nameList.txt file and create an option for it in a select list. The option value is the name plus ".txt" So, create a Bob.txt or a Bill.txt, to test it. The text in Bill.txt will be displayed in the textarea.

[CODE]<html>
 <head>
 <script type="text/javascript">
 
  var lineItem = "";
  var IE = true;
  if (navigator.appName != "Microsoft Internet Explorer"){IE = false}
 
  function displayIt(){
 
   var narrative = window.frames['container'].document.body.lastChild.lastChild.data;
   document.getElementById('info').value = narrative;
  }
 
  function getData(nFile){
 
   window.frames['container'].location.href = nFile;
   setTimeout("displayIt()",1000);
  }
 
  function fillSelect(nItems){
 
   var nList = document.getElementById('names');
   nList.options.length = 1;
   for (each in nItems)
   {
   var nOption = document.createElement('option'); 
   var isData = document.createTextNode(nItems[each]); 
   nOption.setAttribute('value',nItems[each]+'.txt'); 
   nOption.appendChild(isData); 
   nList.appendChild(nOption); 
   }
   nList.selectedIndex = 0;
  } 
 
  function init(){
 
   if (IE)
   {
   lineItem = window.frames['container'].document.body.lastChild.lastChild.data;
   lineItem = lineItem.replace(/[rn]/g,"|").replace(/||/g,"|").replace(/|$/,"").split(/|/);
   fillSelect(lineItem);
   }
   else	{alert('This page is best viewed with Internet Explorer')}
  }
 
  onload=init;
 
 </script>
 </head>
 <body>
 
  <iframe name='container' src='nameList.txt' style='display:none'>
  </iframe>
 
  <textarea cols='30' rows='10' id='info' readonly>
  </textarea> 
  <br>
 
  <select id='names' onchange="getData(this.value)">
   <option value=""> Make a Selection </option>
  </select>
 
 </body>
 </html>
 
 [/CODE]

nameList.txt example:

[CODE]Bob
 Bill
 John
 Mack
 Buddy
 William[/CODE]

@shanevdwauthorJul 13.2006 — #Thanks a million guys I'll give it a bash!

@shanevdwauthorJul 14.2006 — #Hi James

I tried you solution and it worked 100 percent. The only problem is I'm doing this for my girlfriend and you know how women are. Instead of the select box with all the options in I need to make it hyperlinks. So when you click on the hyperlink it displays it in the correct region. I managed to display a list of hyperlinks but now I have the problem of adding an event to the hyperlinks. I used the addEventListener attribute and added the getData method with the correct arguments, only problem is that when it creates the hyperlinks it executes the getData method as it creates it. How can I add this getData method dynamically to my hyperlinks without it executing as it creates it?

@James_GatkaJul 14.2006 — #Shane:

No eventListener is needed. Copy this code AS IS, then save it as an .html document to test it. Please don't chop pieces from it and then pound them in to another document. You don't know all that I changed just by looking at it.

[CODE]<html>
 <head>
 <script type="text/javascript">
 
  var lineItem = "";
  var IE = true;
  if (navigator.appName != "Microsoft Internet Explorer"){IE = false}
 
  function displayIt(){
 
   var narrative = window.frames['container'].document.body.lastChild.lastChild.data;
   document.getElementById('info').value = narrative;
  }
 
  function getData(nFile){
 
   window.frames['container'].location.href = nFile;
   setTimeout("displayIt()",1000);
  }
 
  function fillSelect(nItems){
 
   var nContainer = document.getElementById('linkList');
   for (each in nItems)
   {
   var nLink = document.createElement('a'); 
   var isText = document.createTextNode(nItems[each]); 
   nLink.setAttribute('href',nItems[each]+'.txt');
   nLink.onclick = function(){getData(this.href);return false;} 
   nLink.appendChild(isText); 
   nContainer.appendChild(nLink);
   nContainer.appendChild(document.createElement('br')); 
   }
  } 
 
  function init(){
 
   if (IE)
   {
   lineItem = window.frames['container'].document.body.lastChild.lastChild.data;
   lineItem = lineItem.replace(/[rn]/g,"|").replace(/||/g,"|").replace(/|$/,"").split(/|/);
   fillSelect(lineItem);
   }
   else	{alert('This page is best viewed with Internet Explorer')}
  }
 
  onload=init;
 
 </script>
 </head>
 <body>
 
  <iframe name='container' src='nameList.txt' style='display:none'>
  </iframe>
 
  <textarea cols='30' rows='10' id='info' readonly>
  </textarea> 
  <br>
 
  <div id='linkList'></div>
 
 </body>
 </html>
 [/CODE]

@shanevdwauthorJul 14.2006 — #James you are a star. I will try this when I get home. thanks again so much. I must buy you a beer.

@James_GatkaJul 14.2006 — #You're welcome. A 12 pack would be good!

@shanevdwauthorJul 17.2006 — #Hi James

Thanks so much this code worked perfectly. I just have one last question. Is there a way to insert html tags in the text files I am displaying? In other words can I have a sentence and put the <strong> tag in and it will make the text bold? I’ve tried and I couldn’t get it to work.

@James_GatkaJul 17.2006 — #Shane:

No. HTML tags don't work inside a textarea. You'll have to change the code to use .innerHTML with a <div>, instead of .value for a textarea.

@shanevdwauthorJul 17.2006 — #Hi James

I have changed the displayit() method to look like this:

function displayIt(){

 var narrative = window.frames['container'].document.body.lastChild.lastChild.data;
   var disText   = document.createTextNode(narrative);
   document.getElementById('info').appendChild(disText);
 
  }

I have changed the textarea to be a div. I tried document.getElementById('info').innerHTML(disText) but I couldn't get it to work. I'm really new to Javascript, sorry for all the incinvenience

@James_GatkaJul 17.2006 — #

[CODE]<html>
 <head>
 <script type="text/javascript">
 
  var lineItem = "";
  var IE = true;
  if (navigator.appName != "Microsoft Internet Explorer"){IE = false}
 
  function displayIt(){
 
   var narrative = window.frames['container'].document.body.lastChild.lastChild.data;
   document.getElementById('info').innerHTML = narrative;
  }
 
  function getData(nFile){
 
   window.frames['container'].location.href = nFile;
   setTimeout("displayIt()",1000);
  }
 
  function fillSelect(nItems){
 
   var nContainer = document.getElementById('linkList');
   for (each in nItems)
   {
   var nLink = document.createElement('a'); 
   var isText = document.createTextNode(nItems[each]); 
   nLink.setAttribute('href',nItems[each]+'.txt');
   nLink.onclick = function(){getData(this.href);return false;} 
   nLink.appendChild(isText); 
   nContainer.appendChild(nLink);
   nContainer.appendChild(document.createElement('br')); 
   }
  } 
 
  function init(){
 
   if (IE)
   {
   lineItem = window.frames['container'].document.body.lastChild.lastChild.data;
   lineItem = lineItem.replace(/[rn]/g,"|").replace(/||/g,"|").replace(/|$/,"").split(/|/);
   fillSelect(lineItem);
   }
   else	{alert('This page is best viewed with Internet Explorer')}
  }
 
  onload=init;
 
 </script>
 </head>
 <body>
 
  <iframe name='container' src='nameList.txt' style='display:none'>
  </iframe>
 
  <div id='info' style='border:1px solid black;height:100px;width:150px;font-size:12pt;padding:3px;overflow:auto;'></div>
  <br>
 
  <div id='linkList' style='border:1px solid black;background-color:#f0fff0;width:100px;height:75px;overflow:auto;padding:5px;margin:5px;font-size:12pt'></div>
 
 </body>
 </html>
 [/CODE]

@shanevdwauthorJul 17.2006 — #I know owe you a case of beers. Thanks so much it worked perfectly.

@James_GatkaJul 17.2006 — #Okay. You're welcome. Take care.

@shanevdwauthorJul 18.2006 — #Sorry James I'm back. But you can blame my girlfriend. Got one last question. When my text gets displayed in the layer and I scroll to the bottom of the layer, then I select the next text file to display the scrollbar stays in the same place. It doesn't move back to the top. This is obviously coz the page is not getting refreshed. Is there a way to move the scrollbar on the layer back to the top when I select a new text file?

Thanks again so much

@James_GatkaJul 18.2006 — #Shane:

Try inserting the bold line, where shown:

[CODE]function getData(nFile){
 
   window.frames['container'].location.href = nFile;
   [B]document.getElementById('info').scrollTop = 0;[/B]
   setTimeout("displayIt()",1000);
  }
 [/CODE]

If that doesn't work, empty the box:

[CODE]function getData(nFile){
 
   window.frames['container'].location.href = nFile;
   [B]document.getElementById('info').innerHTML = "";[/B]
   setTimeout("displayIt()",1000);
  }
 [/CODE]

Also in #JavaScript _↴

reference opened window hyperlink not present Question

Success!

Help @shanevdw spread the word by sharing this article on Twitter...

Tweet This

Use a text file dynamically

23 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Use a text file dynamically

23 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

23 Comments(s) _↴

Also in #JavaScript _↴