Handling Remote Files with JavaScript Click Interceptions - Showing the contents of several text files in different windows
(Page 2 of 4 )
As I explained at the beginning, first I’m going to build a rudimentary web page that contains a bunch of links. Once the links have been created, they will open distinct sample text files in a new window, a functionality you've probably coded dozens of times before.
So, I’ll start by building four basic text files, whose respective signatures are listed below:
(definition of textfile1.txt file)
This is the content of text file 1. This is the content of text file 1. This is the content of text file 1. This is the content of text file 1. This is the content of text file 1. This is the content of text file 1. This is the content of text file 1. This is the content of text file 1. This is the content of text file 1. This is the content of text file 1. This is the content of text file 1.
(definition of textfile2.txt file)
This is the content of text file 2. This is the content of text file 2. This is the content of text file 2. This is the content of text file 2. This is the content of text file 2. This is the content of text file 2. This is the content of text file 2. This is the content of text file 2. This is the content of text file 2. This is the content of text file 2. This is the content of text file 2.
(definition of textfile3.txt file)
This is the content of text file 3. This is the content of text file 3. This is the content of text file 3. This is the content of text file 3. This is the content of text file 3. This is the content of text file 3. This is the content of text file 3. This is the content of text file 3. This is the content of text file 3. This is the content of text file 3. This is the content of text file 3.
(definition of textfile4.txt file)
This is the content of text file 4. This is the content of text file 4. This is the content of text file 4. This is the content of text file 4. This is the content of text file 4. This is the content of text file 4. This is the content of text file 4. This is the content of text file 4. This is the content of text file 4. This is the content of text file 4. This is the content of text file 4.
As you can see, the respective definitions of the above sample text files are actually fairly trivial, yet they’ll be more than enough to demonstrate another case where click interceptions can be really useful. But I’m getting ahead of myself; having created the files in question, the only thing that remains undone is building a group of links that load the contents of these files in a different window.
With that concept in mind, you will see below a brand new web page that includes precisely those links:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example on reading text files</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: bold 18pt Arial, Helvetica, sans-serif;
color: #000;
}
h2{
font: bold 16pt Arial, Helvetica, sans-serif;
color: #000;
}
a:link,a:visited{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #00f;
}
a:hover{
color: #f90;
}
p{
font: normal 10pt Arial, Helvetica, sans-serif;
color: #000;
}
#linkcontainer{
width: 300px;
padding: 5px;
background: #ffc;
}
#filecontainer{
width: 300px;
}
</style>
</head>
<body>
<h1>Example on reading text files</h1>
<div id="linkcontainer">
<ul>
<li><a href="textfile1.txt" title="Read contents of text file here...">Read contents of text file 1...</a></li>
<li><a href="textfile2.txt" title="Read contents of text file here...">Read contents of text file 2...</a></li>
<li><a href="textfile3.txt" title="Read contents of text file here...">Read contents of text file 3...</a></li>
<li><a href="textfile4.txt" title="Read contents of text file here...">Read contents of text file 4...</a></li>
</ul>
</div>
<div id="filecontainer"></div>
</body>
</html>
Well, certainly you’ll have to agree with me that the above web document is very simple! As you can see, it contains a list of regular links. When clicked on, these links will load the contents of different text files in the same window. That’s precisely the default behavior of these links, something that’s clearly illustrated by the following screen shot:
So far, everything looks good, right? If you test the previous web page, along with the four text files created earlier, you’ll see that each time you click on one link, the contents of a specific file will be neatly fetched by the browser, and the whole web page will be reloaded. However, and here’s where click interceptions come in, I’d like to change this behavior and make these contents be displayed within a unique DIV on the same web document, without any additional web page reloads.
Is it possible to do such a thing? Of course it is. By means of a few click interceptions I’ll show you how to load the contents of these sample text files on the same web page.
This topic will be covered in detail in the following section, so jump ahead and read the next few lines. I’ll be there, waiting for you.
Next: Loading the contents of several text files without web page reloads >>
More JavaScript Articles
More By Alejandro Gervasio
