One of the developer newsletters I received a while back directed me to the DevASP site. On that site I spied something wonderful. They had created a directory of their site with 1 line of Javascript code, available to any web site. Although I had no need to use their directory, I had to create one of these for INeedCoffee and DeepFitness. It was essential that I figured out how this magic took place. Getting ASP to write valid Javascript was easy enough, figuring out which folder the user clicked on wasn't. After playing with code for a few hours, I decided to contact DevASP. After all, they are supposedly a site dedicated to helping developers. Did they help me? No. They didn't even return my email. So much for helping the developer. After getting shunned by DevASP, my goal was to figure it out, perfect it, and then make the code available here on DigitalColony.

It took quite a bit of research as well as trial and error, but I figured it out. My hope is after you read this you won't spend as much time as I did creating your Javascript directory.

The DeepFitness Newsfeed

Before we proceed, here is the Javascript newsfeed that was created for DeepFitness.

<script language="JavaScript" 
src="http://www.deepfitness.com/togo.aspx" 
type="text/javascript"></script>

Design Backwards

My biggest mistake completing this project was jumping straight into the server-side code. In order for this project to work, you need to have valid HTML generated by valid Javascript, produced by bug-free server-side code. If you jump into the server-side code and get a bug, you won't see it on the screen. The View Source will only yield you that single line of javascript code, which doesn't make debugging an easy task. You can minimize these problems by mocking up the HTML first. Once you've completed the mockup, test your HTML with different DOCTYPE values. Since your javascript directory or newsfeed will reside on many different pages with potentially different DOCTYPE values, it's important that your HTML looks good in each scenerio. Note: unless you do a pure CSS output, your code probably won't validate under each DOCTYPE case. That's OK. If the host of your directory wanted W3C approval, they would be importing your RSS feed and styling it themselves. Breaking Down the Steps

Here is a quick overview of what takes place after an HTML page is loaded that points to the DeepFitness directory generator (www.deepfitness.com/togoDir.aspx).

1. The .ASPX page will use Response.Write to output Javascript's document.write. Inside the document.write will be valid HTML.
2. When the DeepFitness directory loads, the code will check the HTTP Referral. In classic ASP this is done with a Request.ServerVariable("http_referer"). In .NET, it is retrieved with a Request.UrlReferrer.
3. Inside the UrlReferrer there may be a querystring telling the code which folder has been requested. If there is no querystring, that tells the code to load the root. If there is a querystring, our next step is to parse it and retrieve the folderID being requested.
4. Once you have the folderID, then comes the easy stuff. Using that you can get a list of folders and links that match that folder and provide a link back to the home page. This part of the task will depend upon your database structure and what data your wish to represent.

Potential Problems

Above I described how the DOCTYPE on the host page can potentially change the look of your outputted javascript. That can easily be avoided by testing mockups prior to starting your server-side coding. A more serious problem is the prevelance of software tools that block the HTTP referral. Programs like Norton Internet Security and the browser Opera have options to disguise what page the user is coming from. In order for a nested directory application to work, we need to know this information. But if we can't have access to it, then they can't have access to our directory. The DeepFitness directory will hide the folders and just display the Latest Updates if the user blocks their HTTP Referral. If we didn't hide the folders, those users would click onto folders only to be returned back to the root everytime. Not exactly a friendly user interface. Prior to coding, define the behavior your directory should take if it you don't have access to the user's HTTP Referral.

Formatting For Javascript

Certain characters in your data will cause Javascript to crash. Special characters need to be handled with your server-side code. Below is a C# function that I create to do just such task.

EX: FormatForJS(myDataReader["currentBranch"].ToString());

Converting this to Classic ASP should be easy enough

protected string FormatForJS(object input) { 
  string data = input.ToString(); 
  // cast the input to a string 
  data = data.Trim(); 
  // replace those characters that will crash JAVASCRIPT 
  data = data.Replace("'", "\\'"); 
  data = data.Replace("\n", ""); 
  data = data.Replace("\r", ""); 
  return data; 
}

Prevent Caching

Users will often use the back button on their browsers to navigate back up your directory. Unless we do something in our code, the directory will not refresh and the user will remain on the same folder. In .NET the way we force a refresh is with this command: Response.Cache.SetNoStore(); By doing this, the code is never cached and the back button will behave the same as our back link.

Speed Improvements

You can create a Javascript directory using any server-side language. They should all do a fine job, however if you expect a lot of web sites to host it, you'll want it to run as fast as possible. One option is to use compiled code (.NET) instead of scripting code (Classic ASP). And to get the database portion smoking fast, compile your SQL into views and/or stored procedures.

This article was originally written in 2004.

Labels: ASP.NET, Javascript